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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
vue实现搜索功能
2019/05/28 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python图算法实例分析
2016/08/13 Python
Python切片工具pillow用法示例
2018/03/30 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python绘制多个子图的实例
2019/07/07 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
UNIX文件类型
2013/08/29 面试题
交通安全演讲稿
2014/01/07 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
胡桃夹子观后感
2015/06/11 职场文书
病房管理制度范本
2015/08/06 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
导游词之张家口
2019/12/13 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Java数据结构之堆(优先队列)
2022/05/20 Java/Android