关于动态添加路由的一个很大坑,也是一个很小的坑,这是对我来说,是一个非常重要的,重要的,一定要记住;

首先我非常感谢知乎的一个叫做‘王欢’ 的作者,一句话就点明了

最近在做一个企业网站,头部是需要根据后台动态添加的,然后我们肯定是需要根据后台给我们的数据,动态生成头部导航(这个倒是很容易的),然后再动态添加路由,利用的方法是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)

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页