懒加载异常

来源：4-2 Vue-router之配置

薏米狮

2018-07-09

<div>
<router-link to="/home">首页</router-link>
<router-link to="/home/slack">堕落</router-link>
<router-link to="/music">music</router-link>
<router-link to="/user/110">用户中心</router-link>
<router-link to="/about">关于</router-link>
</div>

点击 /home 正常点击/home/slack 正常之后点点击/music 或者其他非 /home 路径出现
Error: Loading chunk 4 failed.
(error: http://localhost:8888/user/4.main.js)
但是 /home 在点击 /about 标签正常点击 /home/slack 正常。
/user 也有这个问题，
就是 /a 路径加载 /a/b 后不能再加载 /c 路径
如果 /a 路径加载 /c 路径后加载 /a/b 路径也是正常。
只有成功一个，自由跳转并没有问题

写回答

2回答

薏米狮

提问者

2018-07-09

export default [
{
name: 'home',
path: '/home',
component: () => import(/* webpackChunkName: "group-home" */ './../page/home.vue'),
meta: {
title: '榄球社区',
description: ''
},
children: [
{
path: 'slack',
component: () => import(/* webpackChunkName: "group-home" */ './../page/slack.vue')
}
]
},
{
path: '/music/',
component: () => import(/* webpackChunkName: "group-home" */ './../page/music.vue')
},
{
name: 'user',
path: '/user/:id/',
component: () => import(/* webpackChunkName: "group-home" */ './../page/user.vue'),
props: { name: 'varjay' }
},
{
path: '/about/',
component: () => import(/* webpackChunkName: "group-home" */ './../page/about.vue')
}
]

找了半天，发现手册上有个注释 /* webpackChunkName: "group-home" */
我加上去，试试。发现BUG搞定了。但是不明白这个是什么东东