vue路由结构可设一层方便动态添加路由操作


Posted in Javascript onAugust 31, 2020

动态添加路由基本功能

let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }]

this.$router.addRoutes(routes)

涉及多层路由嵌套 如图

vue路由结构可设一层方便动态添加路由操作

单纯使用addRoutes 层级结构不同

修改路由结构

例:

{
     name:'account',
     path: '/account/account',
     meta: {
      title: '个人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'account',
       path: '/account/account',
       meta: {
        title: '账号设置',
        requireAuth: true
       },
       component: setAccount,
      },
      {
       name: 'childMgt',
       path: '/account/childMgt',
       meta: {
        title: '子账号管理',
        requireAuth: true
       },
       component: childMgt,
      },
      
     ]
},

修改单一结构

{
     name:'account',
     path: '/account/account',
     meta: {
      title: '个人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'account',
       path: '/account/account',
       meta: {
        title: '账号设置',
        requireAuth: true
       },
       component: setAccount,
      },
     ]
},
{
     name:'account',
     path: '/account/childMgt',
     meta: {
      title: '个人中心',
      requireAuth: true
     },
     component: account,
     children:[
      {
       name: 'userMgt',
       path: '/account/childMgt',
       meta: {
        title: '子账号管理',
        requireAuth: true
       },
       component: childMgt,
      },
     ]
},

每一层单独包含一个子集合方便权限管理动态添加

main.js

router.beforeEach((to, from, next) => {
 if (from.name == null) { //页面刷新
 let pathName = sessionStorage.getItem("pathName") //暂存上一个路由
 if (pathName == to.path||pathName==to.redirectedFrom) {
 } else {
  sessionStorage.setItem("pathName", to.redirectedFrom)
 }
 } else {
  sessionStorage.setItem("pathName", to.path)
 }
 next()
})

app.vue

let routes=[处理后路由信息]
this.$router.addRoutes(routes)
this.$nextTick(i=>{
  this.$router.replace(sessionStorage.getItem("pathName"))//跳转指定地址 否则404
})

补充知识:vue路由进入下一层返回上一层重复跳转之前进入页面

说明

vue路由返回上一层,使用 this.$router.back(-1)

进入其他页面用 this.$outer.push('home')

这样当我进入页面会发生如下场景

进入页面时:A-B-C

返回页面时:C-B-A

总的路径行程:A-B-C-B-A

总的来是:页面返回时重复返回上一层

解决

官方文档

vue路由结构可设一层方便动态添加路由操作

this.$outer.push('home') // 会重复添加路由信息进入路由记录

this.$outer.replace('home') // 会替换之前的路由记录

this.$outer.replace('home') // 跳转页面推荐用这个

以上这篇vue路由结构可设一层方便动态添加路由操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue中轮训器的使用
Jan 27 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 #Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 #Javascript
You might like
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python实现处理mysql结果输出方式
2020/04/09 Python
django rest framework serializers序列化实例
2020/05/13 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
为什么要做架构设计
2015/07/08 面试题
转党组织关系介绍信
2014/01/08 职场文书
剪彩仪式主持词
2014/03/19 职场文书
李敖北大演讲稿
2014/05/24 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python