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


Posted in Javascript onDecember 20, 2018

当当当当当~我又来了。

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

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

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

涉及功能点

侧导航支持多级

Vue Router的使用方法( 官方文档 )

子父组件的写法

样式:elementUI

效果图

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

实现

--- 目录结构

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

--- 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>

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

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

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

routerindex.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 大功告成~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
JavaScript类的继承操作实例总结
Dec 20 #Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python selenium firefox使用详解
2019/02/26 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
授权委托书范本
2014/04/03 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
暂住证明怎么写
2015/06/19 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书