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 相关文章推荐
arguments对象
Nov 20 Javascript
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python中abs&map&reduce简介
2018/02/20 Python
python如何为创建大量实例节省内存
2018/03/20 Python
numpy库reshape用法详解
2020/04/19 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
英文版区域经理求职信
2013/10/23 职场文书
英语自荐信常用语句
2013/12/13 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python