Vue 命名路由 和 嵌套路由(子路由)采坑

Vue 命名路由 和 嵌套路由(子路由)配置时采坑。

错误路由配置入下:

let router = [
	...
	...
	{
        path: "/about",
        name:'about', // 命名路由
        components: {
            default: about,
            navs: Navs
        },
        children:[{ // 子路由
            path:'',
            component: UserHome
        }]
    }
 ]

当通过如上方式配置路由时,console会出现警告(图1),如下:

img1:
在这里插入图片描述

原因及解决方案:

因为当某个路由有子级路由的时候,这时候父级路由需要一个默认的路由,所以父级路由不能定义name属性,解决办法是:即去除父级的name属性,并且不能采用this.$router.push({ name: 'about', params: { id: 456 }});而是采用this.$router.push({ path: '/about' });方式。

{
        path: "/about",
        components: {
            default: about,
            navs: Navs
        },
        children:[{ // 子路由
            path:'',
            component: UserHome
        }]
    }

// 修改跳转方式
this.$router.push({ path: '/about/${id}' });

总结:

路由配置 命名路由 不要与 嵌套路由 同时出现。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页