vue3路由踩坑

原创已于 2023-09-08 11:25:14 修改 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-08 11:20:26 首次发布

文章讲述了在Vue路由配置中，使用`children`描述子路由时遇到的问题，即访问`/home/hello`时只显示父级`HelloWorld.vue`。解决方案是添加完整路径的路由或在父路由中移除默认组件。

问题描述

写完路由后访问/home/hello 一直显示HelloWorld.vue，而不是hello.vue
即显示夫路由页面而非子路由页面

    {
        path: '/home',
        component: () => import('../components/HelloWorld.vue'),
        // 重定向
        // redirect: '/welcome',
        // redirect: to => {
        //     console.log('重定向',to);
        //     return {
        //         path: '/welcome',
        //     }
        // },
        children: [
            {
                path: 'welcome',
                component: () => import('../components/HelloWorld.vue')
            },
            {
                path: 'hello',
                component: () => import('../components/hello.vue')
            }
        ]
    }

原因分析：

用children来描述子路由的话，是需要在父级页面A中写router-view标签用来承载B页面，如果不写的话，router-view的匹配机制只会往下寻找一个路由页面，不再寻找第二个，这是后就只会加载A页面，不会加载B页面。

解决方案：

	//1、在上面添加一个完整的路由即可
    {
        path: '/home/hello',
        component: () => import('../components/hello.vue')
    },
    {
        path: '/home',
        // 2、或者去除下面这一行，让父路由指定组件为空
        component: () => import('../components/HelloWorld.vue'),
        // 重定向
        // redirect: '/welcome',
        // redirect: to => {
        //     console.log('重定向',to);
        //     return {
        //         path: '/welcome',
        //     }
        // },
        children: [
            {
                path: 'welcome',
                component: () => import('../components/HelloWorld.vue')
            },
            {
                path: 'hello',
                component: () => import('../components/hello.vue')
            }
        ]
    }