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

路由如下:

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,直接点击导航访问不会出现这个问题。。。

回答:

嗷,问题解决了,在webpack.min.js加上:

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

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

回答:

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

    {
        path: 'todos',
          component: () => import('./views/todos/index.vue')
    }
  2. 建议把main.js,router.js 和 ./views/todos/index.vue都贴出来最好
  3. 看下这个问题 require 和 import 区别

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注