动态添加路由基本功能
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路由结构可设一层方便动态添加路由操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,路由结构,动态添加,路由
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue路由结构可设一层方便动态添加路由操作”评论...
更新动态
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]