vue Vue Router多级侧导航切换路由实现代码(页面)

当当当当~我又来了。

在项目中经常会遇到侧导航切换页面的功能。

如果我们把侧面导航称为公共组件，那么每个页面都会引用该组件，这在以后的维护中比较麻烦，比如更改参数。

因此，本文将侧导航做成父页面组件，将切换后的页面做成子页面，只需要调用一次。大大减少后期维护的麻烦

涉及功能点

侧面导航支持多级

Vue路由器的使用(官方文件)

父子组件的编写

样式：元素界面

翻译

实现

-目录结构

vuerouter的使用

首先，安装npm安装vue路由器。

然后在main.js中介绍它

从“”导入路由器。/router' new vue ({el:' # app '，路由器，组件： {app}，模板：' app/'})-vue Router用于Vue页面

在App.vue中，请参考路由器视图。

路由器视图相当于一个容器来呈现我们定义的路由

template div id=' app ' router-view/router-view/div/template，最好不要在App.vue中写太多内容，而是显示为爷爷奶奶，这样可以防止新手使用的一些未知错误，比如打包错误。

所以我只在App.vue中引用router-view来渲染根页面，在components/page下新建了一个index.vue页面，用于侧导航和渲染子页

模板div！-v-侧边栏是侧面导航-v-侧边栏/v-侧边栏div class=' content ' : style=' { height :(this。$ store.state.body height-20)' px '，溢出： ' auto ' } ' div/div transition-router-view此处用于呈现子页面-router-view/router-view/transition/div/template script//import vsidebar from './common/side menu . vue '；导出默认{ data(){ return } }、components 3360 {//注册侧导航组件vSidebar }、}/脚本到此页面结构的整个侧导航切换路线已经完成。

想知道如何实现多级导航，可以继续往下看~

我提出了所有的路线，写在单独的文件里，便于统一维护和管理

在路由器的index.js中写入页面路由的名称和引用路径

从“vue-router”导入路由器；使用路由器；导出默认的新路由器({ routes: [ { path: '/'，名称： 'main '，组件： main，子组件：[{ path : '/inputDisabled '，组件： resolve=require (['./components/page/input/index . vue ']，resolve)，meta3360 {title : '禁止输入' }，}，{path3360'/indexselect '，component : resolve=require(['./components/page/input/index select . vue ']，resolve)，meta 3360 { title : ' select link ' }，}，{path:'/loadmoreup '，component : resolve=require(['./components/page/load more/loadmoreup . vue ']，resolve)，meta3360 {title3360 '下拉刷新' }，}，]，}，

我使用elementUI中的导航插件。

注意

菜单数据结构，我这里写的是嵌套结构，父项设置子项。

它们不是平行的，而是通过识别来区分的。

代码的思想是循环遍历循环

模板div class='侧边栏' El-menu class='侧边栏-El-menu ' : default-active=' onRoutes ' : collapse=' collapse ' unique-open router collapse-transition模板v-for=' items '中的项目v-斗篷模板v-if='item.subset.length！==0 ' El-子菜单：索引=' item。URL“:键=”项。“网址”模板槽='title '！-img : src=' http : item。图标' style=' width : 20px高度： 20px '/span-slot=' title ' { item。名称} }/span/模板El-菜单项v-for=' item。subset ' :键=' I ' :索引=' subItem。网址！-img : src=' Http :子项。图标' style=' width : 20px高度： 20px '/span-slot=' title ' { subitem。名称} }/span/El-菜单项/El-子菜单/模板模板v-else El-菜单项： index=' item。URL“:键=”项。网址！-img : src=' http : item。图标' style=' width : 20px高度： 20px '/span插槽=' title ' { item。名称} }/span/El-菜单项/模板/El-菜单/div/模板脚本导出默认值{ data(){ return { collapse : false，item : [{ name : ' element ui之输入""，url: " "，subst :[{ name : }禁止输入，url: '/inputDisabled '，subst :[]}，{ name: 'select联动，url: '/indexSelect '，subst :[]}]}，name: '手机下拉刷新，url: '/loadMoreUp '，subst :[]}]} })，computed: { onRoutes() { //当前激活菜单的索引返回这个$route.path.replace('/'，' ')；} }，}/scriptOK大功告成~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。