脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue动态添加路由

vue路由结构可设一层方便动态添加路由操作

 更新时间：2020年08月31日 10:48:23   作者：一行注释  
这篇文章主要介绍了vue路由结构可设一层方便动态添加路由操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

动态添加路由基本功能

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-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-02-02
  • vue的toast弹窗组件实例详解

    vue的toast弹窗组件实例详解

    本文通过实例给大家讲解了vue的toast弹窗组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-05-05
  • vue+el-table点击表头实现改变其当前样式

    vue+el-table点击表头实现改变其当前样式

    这篇文章主要介绍了vue+el-table点击表头实现改变其当前样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue.delete()删除对象的属性说明

    Vue.delete()删除对象的属性说明

    这篇文章主要介绍了Vue.delete()删除对象的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue 路由子组件created和mounted不起作用的解决方法

    vue 路由子组件created和mounted不起作用的解决方法

    今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • AntV+Vue实现导出图片功能

    AntV+Vue实现导出图片功能

    AntV 组织图操作完毕以后，需要点击按钮将画布以图片的形式导出，这篇文章主要介绍了AntV结合Vue实现导出图片功能,需要的朋友可以参考下
    2023-01-01
  • Vue2.x和Vue3.x的双向绑定原理详解

    Vue2.x和Vue3.x的双向绑定原理详解

    这篇文章主要给大家介绍了关于Vue2.x和Vue3.x的双向绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue中如何给data里面的变量增加属性

    vue中如何给data里面的变量增加属性

    这篇文章主要介绍了vue中如何给data里面的变量增加属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • JS图片懒加载库VueLazyLoad详解

    JS图片懒加载库VueLazyLoad详解

    这篇文章主要为大家介绍了JS图片懒加载库VueLazyLoad示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    这篇文章主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04

最新评论