vue+Vue Router多级侧导航切换路由(页面)的实现代码
当当当当当~我又来了。
在项目里经常会遇到侧导航切换页面的功能。
如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数。
所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可。大大减少了后期维护的麻烦
涉及功能点
侧导航支持多级
Vue Router的使用方法( )
子父组件的写法
样式:elementUI
效果图
实现
--- 目录结构
--- Vue Router的使用方法
首先安装 npm install vue-router
。
然后在 main.js
中引入
import router from './router' new Vue({ el: '#app', router, ponents: { 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
只渲染根页面,而 ponents/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> </template> <script> //引入侧导航组件 import vSidebar from '../mon/sideMenu.vue'; export default { data() { return {} }, ponents:{ //注册侧导航组件 vSidebar }, } </script>
到此整个侧导航切换路由的页面结构已经完成了
如果你想了解,怎么实现多级导航,那么可以继续向下看~
我将路由都提出来写在了单独的文件里,这样方便统一维护管理
在 router
的 index.js
将页面路由的名字和引用路径都写好
import Router from 'vue-router'; Vue.use(Router); export default new Router( { routes: [ { path: '/', name: 'main', ponent: main, children: [ { path: '/inputDisabled', ponent: resolve => require(['../ponents/page/input/index.vue'], resolve), meta: {title: '禁止输入'}, }, { path: '/indexSelect', ponent: resolve => require(['../ponents/page/input/indexSelect.vue'], resolve), meta: {title: 'select联动'}, }, { path: '/loadMoreUp', ponent: resolve => require(['../ponents/page/loadMore/loadMoreUp.vue'], resolve), meta: {title: '下拉刷新'}, }, ], }, ] })
--- 侧导航来啦~
我用的是elementUI里的导航插件。
注意
菜单数据结构,我这里写的是嵌套结构,父级套子级。
而不是并级,用标识来区分。
代码思路就是循环套循环
<template> <div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened router collapse-transition> <template v-for="item in items" v-cloak> <template v-if="item.subset.length!==0"> <el-submenu :index="item.url" :key="item.url"> <template slot="title"> <!--<img :src="item.icon" style="width: 20px;height: 20px"/>--> <span slot="title">{{ item.name }}</span> </template> <el-menu-item v-for="(subItem,i) in item.subset" :key="i" :index="subItem.url"> <!--<img :src="subItem.icon" style="width: 20px;height: 20px"/>--> <span slot="title">{{ subItem.name }}</span> </el-menu-item> </el-submenu> </template> <template v-else> <el-menu-item :index="item.url" :key="item.url"> <!--<img :src="item.icon" style="width: 20px;height: 20px"/>--> <span slot="title">{{ item.name }}</span> </el-menu-item> </template> </template> </el-menu> </div> </template> <script> export default { data() { return { collapse: false, items: [{ name: "elementUI之input", url: "", subset: [ {name: "禁止输入", url: "/inputDisabled", subset: []}, { name: "select联动", url: "/indexSelect", subset: [] }] }, {name: "手机下拉刷新", url: "/loadMoreUp", subset: []}] } }, puted: { onRoutes() { //当前激活菜单的 index return this.$route.path.replace('/', ''); } }, } </script>
OK 大功告成~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程