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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
javascript动画算法实例分析
Jul 31 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python实现ping指定IP的示例
2018/06/04 Python
python递归法解决棋盘分割问题
2019/07/17 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
市场营销工作计划书
2014/05/06 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
学术会议开幕词
2016/03/03 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL