vue如何通过导航菜单跳转页面

在 Vue 中通过导航菜单跳转页面可以使用 Vue Router 来实现。

首先，需要在项目中安装 Vue Router：

npm install vue-router --save

然后在 `main.js` 中引入并使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在上面的代码中，我们定义了两个路由，分别是 `/` 和 `/about`，并分别对应着 `Home` 和 `About` 组件。然后通过 `VueRouter` 创建了一个路由实例，并将其传递给 `Vue` 实例中。

接下来，在项目中创建导航菜单，在导航菜单中使用 `router-link` 组件来实现页面跳转：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

在上面的代码中，我们通过 `to` 属性来指定跳转的路径。当用户点击导航菜单中的链接时，路由会根据路径自动渲染对应的组件。

除了使用 `router-link` 组件，我们还可以使用编程式导航来实现页面跳转。例如，在组件中可以使用 `$router.push` 方法来进行跳转：

// 在组件中跳转到 /about 页面
this.$router.push('/about')

以上就是在 Vue 中通过导航菜单跳转页面的基本实现方式。