3

关于Vue-router=>addRoutes 方法的一些坑

 3 years ago
source link: https://callmesoul.cn/posts/21e9c2c0-4102-11eb-b113-9717c2aea740/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

关于Vue-router=>addRoutes 方法的一些坑

2020-02-28 08:07:10

关于Vue-router=>addRoutes 方法的一些坑

    1. router.addRoutes(routes: Array<RouteConfig>)

routes 是要符合路由规范的数组

  1. router.addRoutes 只是注册了路由的规则，但是并不会自动更新路由列表项，需要先手动更新路由列表，再去注册规则
  1. // 手动添加路由列表项
  2. router.options.routes.push(...routers)
  3. // 注册路由规则
  4. router.addRoutes(routers)

  1. 注册完最好重定向

    如果添加路由之前，要访问的地址是需要 addRoutes 添加的。

    那么在调用addRouters之前路由并不存在，所以注册完需重定向一下要访问的地址

    在路由导航守卫可以这样些

    1. router.beforeEach((to, from, next) => {
    2. // 其他逻辑
    3. router.options.routes.push(...asyncRouterMap)
    4. router.addRoutes(asyncRouterMap)
    5. next(to.path)
    6. })

  2. 动态引入组件component

    网上很多人的文章的copy的，也没验证过，所有导致搜索的大部分方法都是不行

    • component: () => import(componentPath) 不行

    • component: () => import('@/' + componentPath) 不行

      还有很多的网上办法都不行的

      最后找到了解决方法：

      1. component: require.ensure([], (require) => {
      2. resolve(require('@/' + componentPath))
      3. }),

      注意： @/ 要分开写死，不可以连同地址一块传入，可能是为了给webpack标识的

0 comments

Be the first person to leave a comment!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK