当当当当当~我又来了。
在项目里经常会遇到侧导航切换页面的功能。
如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。
所以此文将侧导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦
涉及功能点
侧导航支持多级
Vue Router的使用方法（ 官方文档 ）
子父组件的写法
样式：elementUI
效果图
实现
— 目录结构
— Vue Router的使用方法
首先安装
npm install vue-router 。然后在
main.js 中引入
import router from './router'new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
— vue页面使用Vue Router
在
App.vue 里引用
router-view 。
router-view 就相当于一个容器，来渲染我们定义的路由
<template>
<div id="app">
<router-view></router-view>
</div>
</template>最好不要在
App.vue 里写太多内容，把它作为祖父级展示就可以啦，能预防新手使用的一些未知错误，如打包出错之类的。所以，我在在
App.vue 里引用
router-view 只渲染根页面，而
components/page 下新建了一个
index.vue 页面，用来放侧导航和渲染子页面
<template>
<div>
<!--v-sidebar是侧导航-->
<v-sidebar ></v-sidebar>
<div class="content" :style="{height: (this.$store.state.bodyHeight-20) + 'px',overflow:'auto'}">
<div></div>
<transition name="move" mode="out-in">
<!--这里的router-view用来渲染子页面-->
<router-view></router-view>
</transition>
</div>
</div>
