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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
关于Vue中$refs的探索浅析
Nov 05 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 的异常处理程序
2014/06/22 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue中的scope使用详解
2017/10/29 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
JavaScript继承与多继承实例分析
2018/05/26 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Django nginx配置实现过程详解
2020/09/10 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
JAVA和C++的区别
2013/10/06 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
迟到检讨书500字
2014/02/05 职场文书
春风行动实施方案
2014/03/28 职场文书
技术支持岗位职责
2015/02/13 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技