当当当当当~我又来了。
在项目里经常会遇到侧导航切换页面的功能。
如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数。
所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可。大大减少了后期维护的麻烦
<强>涉及功能点
侧导航支持多级
Vue路由器的使用方法(官方文档)
子父组件的写法
样式:elementUI
<>强效果图
<强> - - -目录结构
<强> - - - Vue路由器的使用方法
首先安装<代码> npm安装vue-router>
然后在<代码>主要。js代码中引入
从“进口路由器。/路由器的
新Vue ({
埃尔:“#应用”,
路由器,
组件:{应用},
模板:“& lt; App/祝辞;”
}）
之前
<强> - - - vue页面使用vue路由器
在<代码>应用程序。vue> router-view>
<代码> router-view>
& lt; template>
& lt; div id=坝τ谩北?
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/template>
最好不要在<代码>应用程序。vue 里写太多内容,把它作为祖父级展示就可以啦,能预防新手使用的一些未知错误,如打包出错之类的。
所以,我在在<代码>应用程序。vue> router-view> 组件/页下新建了一个<代码>索引。vue>
& lt; template>
& lt; div>
& lt; !——v-sidebar是侧导航——比;
& lt; v-sidebar祝辞& lt;/v-sidebar>
& lt; div类=澳谌荨?在
& lt; div> & lt;/div>
& lt;过渡的名字==罢蕉贰北取耙贫蹦Ｊ?
& lt; !——这里的router-view用来渲染子页面——比;
& lt; router-view> & lt;/router-view>
& lt;/transition>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>//引入侧导航组件
从“. ./共同/进口vSidebar sideMenu.vue”;
出口默认{
数据(){
返回{}
}，
组件:{//注册侧导航组件
vSidebar
}，
}
& lt;/script>
到此整个侧导航切换路由的页面结构已经完成了
如果你想了解,怎么实现多级导航,那么可以继续向下看~
我将路由都提出来写在了单独的文件里,这样方便统一维护管理
路由器在<代码> 的<代码>索引。js代码将页面路由的名字和引用路径都写好
从“vue-router”进口路由器;
Vue.use(路由器);
出口新路由器(默认
{
路线:[
{
路径:“/?
名称:“主要”,主要组件:,
孩子:(
{
路径:/inputDisabled,
组件:解决=比;要求([' . ./组件/页面/输入/索引。vue '],解决),
元:{标题:“禁止输入的},
}，
{
路径:/indexSelect,
组件:解决=比;要求([' . ./组件/页面/输入/indexSelect。vue '],解决),
元:{标题:选择联动”},
}，
{
路径:/loadMoreUp,
组件:解决=比;需要([' . .//页面/loadMore/loadMoreUp组件。vue '],解决),
元:{标题:“下拉刷新”},
}，
]，
}，
]
})
<强> - - -侧导航来啦~
我用的是elementUI里的导航插件。
<强>注意
菜单数据结构,我这里写的是嵌套结构,父级套子级。
而不是并级,用标识来区分。
代码思路就是循环套循环
& lt; template>
& lt; div类=安啾呃浮北?
& lt; el-menu类=皊idebar-el-menu”: default-active=皁nRoutes”:崩溃=氨览！眜nique-opened路由器
collapse-transition>
& lt;模板v=毕钅吭谙钅俊皏-cloak>
& lt;模板v=癷tem.subset.length !==0”比;
& lt; el-submenu:指数="项目。url”:关键=" item.url "比;
& lt;模板槽=氨晏狻北?
& lt; !——& lt; img src=" https://www.yisu.com/zixun/item.icon "/祝辞——比;
& lt;跨槽="标题"在{{item.name}} & lt;/span>
& lt;/template>
& lt; el-menu-item v="(子项,我)项目。子集”:关键=拔摇?指数=" subItem.url”比;
& lt; !——& lt; img src=" https://www.yisu.com/zixun/subItem.icon "/祝辞——比;
& lt;跨槽="标题"在{{subItem.name}} & lt;/span>
& lt;/el-menu-item>
& lt;/el-submenu>
& lt;/template>
& lt;模板v-else>
& lt; el-menu-item:指数="项目。url”:关键=" item.url "比;
& lt; !——& lt; img src=" https://www.yisu.com/zixun/item.icon "/祝辞——比;
& lt;跨槽="标题"在{{item.name}} & lt;/span>
& lt;/el-menu-item>
& lt;/template>
& lt;/template>
& lt;/el-menu>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
崩溃:假的,
项目:[{
名称:“elementUI之输入”,
url:“”,
子集:(
{名称:“禁止输入”,url:“/inputDisabled子集:[]},
{名称:“选择联动”,url:“/indexSelect子集:[]
})
},{名称:“手机下拉刷新”,url:“/loadMoreUp子集:[]}]
}
}，
计算:{
onRoutes () {//当前激活菜单的指数
返回这个。route.path美元。替换(‘/?”);
}
}，
}
& lt;/script>
