vue3路由踩坑

问题描述

写完路由后访问/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')
            }
        ]
    }