vue怎么实现点击左侧菜单跳转页面

Vue 可以通过 `vue-router` 实现路由跳转，这个插件可以帮助我们管理页面路由。下面是一个简单的示例：

1. 安装 `vue-router`

npm install vue-router --save

2. 创建路由对象

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

在路由对象中，我们定义了三个路由，分别对应了三个页面：Home、About 和 Contact。

3. 在组件中使用路由

在组件中，我们可以使用 `router-link` 组件来实现点击菜单跳转页面的功能：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
</template>

在这个示例中，我们通过 `router-link` 组件来创建三个链接，分别对应了三个路由。当用户点击链接时，`router-link` 组件会自动触发路由跳转。

4. 在根组件中使用路由

最后，在根组件中使用路由：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

`router-view` 是一个用来显示当前路由组件的组件，我们需要在根组件中使用它来实现页面的跳转。

现在，当用户点击菜单时，页面会自动跳转到对应的页面。