vue router使用了异步加载后无法直接通过url访问

Question

路由如下：

export default [
    {
        path: '/',
        component: require('./views/Root.vue'),
        children: [
            {
                path: '/',
                component: require('./views/index.vue')
            },
            {
                path: 'todos',
                component: require('./views/todos/parent.vue'),
                children: [
                    {
                        path: 'create',
                        component: () => import('./views/todos/index.vue')
                    }
                ]
            },
            {
                path: 'users',
                component: require('./views/users/parent.vue'),
                children: [
                    {
                        path: 'create',
                        component: require('./views/users/index.vue')
                    }
                ]
            }
        ] 
    }
];

问题：当我在浏览器输入xxx.dev/todos/create时，浏览器会跳转到xxx.dev，然后页面空白，需要刷新一下才会显示正常首页。而访问xxx.dev/users/create则能直接显示用户列表页面。

那么，我需要如何修改代码才能让todos/create也能像users/create那样能直接在浏览器输入网址访问呢？

---

vue => 2.4.2
webpack => 3.4.1

---

发现个问题，就是我直接访问xxx.dev/todos/create的时候，浏览器访问的是xxx.dev/todos/0.js，而实际上这个文件在xxx.dev/0.js，直接点击导航访问不会出现这个问题。。。

Answer 1

嗷，问题解决了，在webpack.min.js加上：

mix.webpackConfig({
    output: {
        publicPath: '/'
    }
});

---

@Liuyan_o @悠扬小Q 很抱歉。。。我之前以为这是vue-router的问题，没有说明我是laravel-mix。。。

Answer 2

1. 尝试把下面代码中的import 改为require

   {
       path: 'todos',
         component: () => import('./views/todos/index.vue')
   }

2. 建议把main.js，router.js 和 ./views/todos/index.vue都贴出来最好
3. 看下这个问题 require 和 import 区别