vue左侧菜单选中右侧跳转页面

假设你的左侧菜单是一个列表，每个菜单项都有一个对应的路由路径，那么你可以使用`vue-router`和`router-link`组件来实现左侧菜单选中右侧跳转页面的功能。

首先，在你的Vue项目中安装`vue-router`：

npm install vue-router

然后，在你的Vue项目中创建一个路由文件，比如`router.js`，定义你的路由配置：

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

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

export default router

在这个例子中，我们定义了三个路由：`/`对应`Home`组件，`/about`对应`About`组件，`/contact`对应`Contact`组件。

接下来，在你的Vue项目中使用`router-link`组件来渲染你的左侧菜单列表。你可以给`router-link`组件传递一个`to`属性，来指定它所对应的路由路径。当用户点击左侧菜单列表中的某一项时，Vue会根据路由路径自动跳转到对应的页面。

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

在这个例子中，我们使用`router-link`组件来渲染左侧菜单列表。当用户点击左侧菜单列表中的某一项时，Vue会自动跳转到对应的组件。

最后，你需要在你的Vue项目中引入`router.js`文件，并在`main.js`中注册路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

现在，当用户点击左侧菜单列表中的某一项时，Vue会自动跳转到对应的组件，实现了左侧菜单选中右侧跳转页面的功能。