vue组件的嵌套 20

路由嵌套 配置规则

1）

父级路由

<router-link to="/home">首页</router-link>

<router-link to=“/user”>用户</router-link>

<router-view></router-view>

子路由

<template id="user">

    <div>

        <router-link to="user/username">去子路由</router-link>

        <!--子路由视图显示的地方-->

        <router-view></router-view>

    </div>

</template>

2）配置路由 定义路由

子路由配置

        {

            path:'/user',component:User,

            'children':[  /*定义自组件的路由*/     compont中在那个级别的路由下加children：[ 代表的是哪个级别下的路由]

                {

                    path:'username',component:UserName,    /*注意：子路由前面的斜杠*/

                }

            ]

        },

其他步骤一样

子路由储存参数

'children':[

{path:':aa',component:aaa}

]

$route.params.aa取值

同路由内，视图切换通过watch检测路由参数更改

watch:{

'$route'(to,from){

}

}

子路由 重定向路径－－默认显示

{path:‘/about’,redirect:‘/about/0’}

意思：当路径为/about 时 自动指向 /about/0