本篇文章给大家分享的是有关在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, }, ] },