router vue 动态改变url_vue动态路由

什么叫动态路由呢？顾名思义就是程序员眼中的硬编码与非硬编码的区别。

还是拿之前的静态路由来做对比

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes
})export default router

这是我们之前的写法。

现在我们需要将

const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]

这段代码里路由动态化，从而实现动态路由加载的过程。

首先要实现这个目的，你的了解router的生命钩子。

我们这里实现这个目的只用到 beforeEach 这一个方法，下面我们来实现这一过程。感兴趣的老铁可以去看vuerouter官网的介绍。

首先我们模拟一个后台请求，创建nav.js

export const nav = [{label:'主页',url:'Index',icon:'home'},{label:'测试',url:'Test',icon:'all_inclusive'},
]

然后我们再router里面引入nav.js

import Vue from 'vue'
import Router from 'vue-router'
import {nav} from './nav'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes
})router.beforeEach((to, from, next) => {if (!router.isAddDynamicMenuRoutes) {let list = [];nav.forEach(item => {let url = '/'+item.url.replace('/', '-').toLowerCase();let urlName = item.url + '.vue';list.push({label:item.label,url:url,icon:item.icon});mainRoutes.children.push({path: url, component: () => import(`pages/${urlName}`)})});router.addRoutes([mainRoutes,])router.isAddDynamicMenuRoutes = true;sessionStorage.setItem('nav', JSON.stringify(list));next({ ...to, replace: true })}else {next()}
})export default router

这样就实现了路由动态的效果了。是不是很简单呢。

最后我将目录结构截图出来大家看下。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！