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中的常见排序算法
Mar 27 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
Node.js实现数据推送
Apr 14 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
javascript实现时钟动画
Dec 03 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
微信小程序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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python合并多个Excel数据的方法
2018/07/16 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
UNIX文件系统分类
2014/11/11 面试题
先进个人获奖感言
2014/01/24 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
晚会主持词开场白
2014/03/17 职场文书
师范生求职自荐信
2014/06/14 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
公司门卫岗位职责
2015/04/13 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS