Vue——day3

用vue-router击按钮实现路由的跳转

如上图所示，在左侧点击某一个功能按钮，左侧栏和上框栏都不变，只改变右边的主内容框。并且左侧栏和上框栏不需要重复写。

 实现步骤：

1.安装vue-router:

npm run vue-router

2.在router下创建index.js文件，引入并定义路由，创建router实例并暴露

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)
const routes=[
{
        path: '/home',
        component: () => import('../views/Home')
 },
]
//创建router实例
const router = new VueRouter({
  routes
})
//暴露
export default router

3.在main.js中引入，并将router挂载

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router' // 引入路由配置文件

Vue.use(VueRouter);

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

4.在Home组件中创建一个按钮，用v-on绑定一个方法，实现路由跳转的功能

 <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
     <el-menu-item @click="clickMenu(subItem)" :index="subItem.path + ''">
          {{ subItem.label }}</el-menu-item>
 </el-menu-item-group>



 clickMenu(item)
 { 
   this.$router.push(item.path)
 }

5.在主组件中要显示路由跳转的内容的地方，添加<router-view />

 <el-container>
     <el-aside width="200px">
         <CommonAside />
      </el-aside>
     <el-container>
      <el-header>
          <CommonHeader />
      </el-header>
        <el-main>
      //通过路由跳转显示的地方
          <router-view></router-view>  
        </el-main>
      </el-container>
 </el-container>