当当当当当~我又来了。
在项目里经常会遇到侧导航切换页面的功能。
如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。
所以此文将侧导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦
涉及功能点
- 侧导航支持多级
- Vue Router的使用方法（官方文档）
- 子父组件的写法
- 样式：elementUI
效果图
12-19-10_30_14.gif
实现
--- 目录结构
TIM截图20181219104229.png
--- Vue Router的使用方法
首先安装npm install vue-router。
然后在main.js中引入
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '--- vue页面使用Vue Router
在App.vue里引用router-view。
router-view就相当于一个容器，来渲染我们定义的路由
最好不要在App.vue里写太多内容，把它作为祖父级展示就可以啦，能预防新手使用的一些未知错误，如打包出错之类的。
所以，我在在App.vue里引用router-view只渲染根页面，而components/page下新建了一个index.vue页面，用来放侧导航和渲染子页面
到此整个侧导航切换路由的页面结构已经完成了
如果你想了解，怎么实现多级导航，那么可以继续向下看~
我将路由都提出来写在了单独的文件里，这样方便统一维护管理
在router的index.js将页面路由的名字和引用路径都写好
import Router from 'vue-router';
Vue.use(Router);
export default new Router(
{
routes: [
{
path: '/',
name: 'main', component: main,
children: [
{
path: '/inputDisabled',
component: resolve => require(['../components/page/input/index.vue'], resolve),
meta: {title: '禁止输入'},
},
{
path: '/indexSelect',
component: resolve => require(['../components/page/input/indexSelect.vue'], resolve),
meta: {title: 'select联动'},
},
{
path: '/loadMoreUp',
component: resolve => require(['../components/page/loadMore/loadMoreUp.vue'], resolve),
meta: {title: '下拉刷新'},
},
],
},
]
})
--- 侧导航来啦~
我用的是elementUI里的导航插件。
注意
菜单数据结构，我这里写的是嵌套结构，父级套子级。
而不是并级，用标识来区分。
代码思路就是循环套循环
OK 大功告成~
欢迎交流和指正~~
喜欢你就点点赞，哈哈哈哈哈哈哈