首先我非常感谢知乎的一个叫做‘王欢’ 的作者,一句话就点明了
最近在做一个企业网站,头部是需要根据后台动态添加的,然后我们肯定是需要根据后台给我们的数据,动态生成头部导航(这个倒是很容易的),然后再动态添加路由,利用的方法是vm.$router.addRouters()【不明白怎么用的可以去官网看一下】,
参数是,一个数组,这个是数组和路由配置里的routes里的是需要一样的数组;
还记得我们是怎么配置路由的吗?
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import home from '@/views/home' var router = new VueRouter({ base: '/app/', mode: 'history', routes: [ { path: '/', component: home } ] }) export default router
对,我们需要先用import导入组件,一个数组对应一个组件的,这在写死的情况下很容易的;
但是如果我们用 vm.$router.addRoutes()这个方法的时候,你想过里面的参数要怎么写吗?
像这样?
vm.$router.addRoutes([ { path: '/', component: home } ])这样肯定是不靠谱的,因为后台返回给我们的数据是这样的
[ { path: '/', component: '路径,注意这里是字符串的' } ]
你看到了,component后面跟着的是字符串的,对,你无法用变量的;
所幸的是,vue-router里提供了动态加载组件的方法,比如:compoent选项后面其实是可以跟一个函数的,比如
[ path: '/', component: require.ensure([], (require) => { resolve(require('@/views/home.vue')) }) ]
看到这里,你会说,那还不容易吗,到时候后台返回字符串路径给我就好了,我直接写一个函数,传进去字符串好了;比如这样
function getViews(path) { return resolve => { require.ensure([], (require) => { resolve(require(url)) }) } }
然后循环数组就好了,然而你这么做了以后,你会发现,vue就会一直报错,对的就是一直报错;
但其实这里需要注意一点,
require.ensure里面的require不可以用变量,使用了拼接方法可以解决
如下
function getViews(path) { return resolve => { require.ensure([], (require) => { resolve(require('@/views/' + path + '.vue')) }) } }经过试验,其实
resolve => require([path],resolve)
这个path也不能用变量,也需要是拼接的
resolve => require(['@/views/' + routes[i].componentName + '.vue'],resolve)