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 相关文章推荐
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
jQuery实现计算器功能
Oct 19 jQuery
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
jQuery 选择器理解
2010/03/16 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
快速创建python 虚拟环境
2020/11/28 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
公司委托书怎么写
2014/08/02 职场文书
付款承诺函范文
2015/01/21 职场文书
经典导游欢迎词
2015/01/26 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL