Vue.js路由问题：导航下拉菜单页面跳转实现方法咨询

Hey there! Let's get those dropdown menu items linking to your Vue routes properly. Here are two straightforward ways to make this work, tailored to your setup:

1. Use <router-link> (Recommended: Declarative Navigation) #

Vue Router's built-in <router-link> component is the go-to choice for most navigation cases—it handles all the behind-the-scenes work like adding active states and preventing full page refreshes.

Assuming your navbar dropdown uses a standard <ul>/<li> structure, you can wrap each menu item with <router-link> like this:

<template>
  <!-- Header Navbar -->
  <nav class="navbar">
    <!-- Markets Tab & Dropdown -->
    <div class="nav-tab">
      <span>Markets</span>
      <ul class="dropdown">
        <!-- Link via direct path -->
        <li>
          <router-link to="/MarketComponent">Market Overview</router-link>
        </li>
        <!-- Link via route name (more flexible if you ever change the path) -->
        <li>
          <router-link :to="{ name: 'marketComponent' }">Market Trends</router-link>
        </li>
      </ul>
    </div>

    <!-- Sectors Tab & Dropdown -->
    <div class="nav-tab">
      <span>Sectors</span>
      <ul class="dropdown">
        <li>
          <router-link :to="{ name: 'sectorComponent' }">Sector Performance</router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

• The to attribute accepts either a string path or an object with the route's name (using the name is better practice—if you update the route path later, you won't have to change every link).
• <router-link> automatically renders as an <a> tag and adds a router-link-active class to the active route, making it easy to style active menu items.

2. Programmatic Navigation (For Logic-Heavy Cases) #

If you need to run custom logic (like user validation or data checks) before navigating, use Vue Router's $router.push() method instead:

<template>
  <nav class="navbar">
    <!-- Companies Tab & Dropdown -->
    <div class="nav-tab">
      <span>Companies</span>
      <ul class="dropdown">
        <li @click="goToCompanyList">All Companies</li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  methods: {
    goToCompanyList() {
      // Add any pre-navigation logic here
      console.log("Prepping company list view...");
      
      // Navigate to the route (can use path or name)
      this.$router.push("/CompanyComponent");
      // OR: this.$router.push({ name: 'companyComponent' });
    }
  }
}
</script>

Quick Note: Clean Up Your Route Config #

I noticed your SectorComponent route was cut off—make sure to finish defining all your routes properly, and consider using semantic lowercase paths for better readability:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MarketComponent from '@/components/MarketComponent'
import SectorComponent from '@/components/SectorComponent'
import CompanyComponent from '@/components/CompanyComponent' // Don't forget to import this!

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/markets', // More semantic than /MarketComponent
      name: 'marketComponent',
      component: MarketComponent
    },
    {
      path: '/sectors',
      name: 'sectorComponent',
      component: SectorComponent
    },
    {
      path: '/companies',
      name: 'companyComponent',
      component: CompanyComponent
    }
  ]
})

内容的提问来源于stack exchange，提问作者Saurabh dhuri