时间:2021-05-26
动态添加路由基本功能
let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }]
this.$router.addRoutes(routes)
涉及多层路由嵌套 如图
单纯使用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
总的来是:页面返回时重复返回上一层
解决
官方文档
this.$outer.push('home') // 会重复添加路由信息进入路由记录
this.$outer.replace('home') // 会替换之前的路由记录
this.$outer.replace('home') // 跳转页面推荐用这个
以上这篇vue路由结构可设一层方便动态添加路由操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
第一层路由我写在app.vue里面。如图所示:footer.vue:二级路由是这样:index.js里面的配置:效果图:效果出来了,又出现新的问题,就是点击二级
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根
注意:vue-router是无法完全控制前端路由权限。1、实现思路使用vue-router实例函数addRoutes动态添加路由规则,不多废话直接上思维导图:2
问题描述昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况。场景后台管理系统的权限控
路由方式有静态路由和动态路由,动态路由比静态路由方便,因为动态路由会自主选择最佳路径的,静态路由某个节点瘫痪了,就整个网络都瘫痪了。软件名称:最新思科路由器交换