我想将vue的路由部分动态加载,并且这个动态的配置保存在服务器上,这样可以灵活的根据不同的需求进行更改。 查了些资料,大致做法如下:
setTimeout(()=>{ // 在某个时机,从服务器获取动态路由配置 //dynamicRoutes 数据无法在服务器和客户端之间使用rest api传输 const dynamicRoutes = [ { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }, { path: '/profile', component: Profile, meta: { requiresAuth: true, requiresAdmin: true } } ]; // 动态添加路由 for(let route in dynamicRoutes) router.addRoute(route); }, 30*1000);//模拟异步,30秒后运行
但上面的代码有个问题,component 必须要已经import了才行,这样就没办法通过服务器传递给客户端配置来进行了。 于是就进行了下面的修改:
setTimeout(()=>{ // 在某个时机,从服务器获取动态路由配置 //dynamicRoutes 数据可以在服务器和客户端之间使用rest api传输 const dynamicRoutes = JSON.parse(JSON.stringify([ { path: '/dashboard', component: './components/dashboard.vue', //这里要使用相对路径 meta: { requiresAuth: true } }, { path: '/profile', component: "./components/profile.vue", meta: { requiresAuth: true, requiresAdmin: true } } ])); // 动态添加路由 for(let route in dynamicRoutes) { router.addRoute({ path: route.path, component: ()=> import(`${route.component}`), meta: route.meta }); } }, 30*1000);//模拟异步,30秒后运行
在component部分,使用相对路径则可以,如果使用@开头的路径,则不可以。虽然不完美,至少解决了些问题。
这样做的结果是将关键的组件稍稍隐藏一下,当用户侧没有某个权限的时候,则某个组件完全不加载,完全看不到。