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

2019-11-19 12:19:31

字体：大中小

来源：转载

供稿：网友

当当当当当~我又来了。

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

如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。

所以此文将侧导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦

涉及功能点

侧导航支持多级

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></template><script> //引入侧导航组件  import vSidebar from '../common/sideMenu.vue';  export default {    data() {      return {}    },    components:{     //注册侧导航组件      vSidebar    },  }</script>

到此整个侧导航切换路由的页面结构已经完成了

如果你想了解，怎么实现多级导航，那么可以继续向下看~

我将路由都提出来写在了单独的文件里，这样方便统一维护管理

在 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里的导航插件。

注意

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

而不是并级，用标识来区分。

代码思路就是循环套循环

<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: []}]   }  },  computed: {   onRoutes() {    //当前激活菜单的 index    return this.$route.path.replace('/', '');   }  }, }</script>

OK 大功告成~

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

上一篇：微信小程序实现的点击按钮弹出底部上拉菜单功能示例

下一篇：微信小程序module.exports模块化操作实例浅析