左侧导航栏右侧跳转页面vue2

在Vue 2中，创建一个左侧导航栏并实现在点击后右侧页面跳转，通常涉及到组件化和路由管理。你可以按照以下步骤操作：

1. **安装依赖**:
首先安装Vue Router，用于处理页面间的导航：

   npm install vue-router

2. **配置`main.js`**: 在项目的入口文件中设置路由器，并导入所需的视图组件。

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

   Vue.config.productionTip = false

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

3. **创建`router`文件夹和`Router.js`文件**:
定义路由规则，比如使用数组形式：

   // Router.js
   import { createRouter, createWebHistory } from 'vue-router'

   const routes = [
     { path: '/', component: YourHomeComponent },
     { path: '/page2', component: YourPage2Component }
   ]

   const router = createRouter({
     history: createWebHistory(), // 使用web标准的history API
     routes
   })

   export default router

4. **在`App.vue`或其他需要的地方引入并使用导航**:
在模板部分，使用`<router-link>`标签链接到各个页面：

   <template>
     <div id="app">
       <!-- 左侧导航栏 -->
       <nav>
         <router-link to="/">首页</router-link>
         <router-link to="/page2">页面2</router-link>
       </nav>

       <!-- 使用v-if/v-else动态切换内容区域 -->
       <router-view></router-view>
     </div>
   </template>

5. **响应式地更新页面内容**:
当用户点击左侧导航栏的链接时，右侧的`<router-view>`将自动渲染对应路径的组件。