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与C# Windows应用程序交互方法
Jun 29 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
学习党课思想汇报
2013/12/29 职场文书
学生会主席事迹材料
2014/01/28 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014年环保局工作总结
2014/12/11 职场文书
小学中队活动总结
2015/05/11 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Python实现Hash算法
2022/03/18 Python