背景

以home页面为例，有时候在home页面，我们希望既展示新闻News，也展示消息Message。切换路由，home组件本身的内容不变，但是其内部的News和Message切换。

此时，home是外层路由，而其内部的News和Message又是它的子路由，出现路由嵌套。

配置

页面配置

<template>
    <div>
        <h2>我是home组件内容</h2>
        <router-link :to="/home/news">新闻</router-link>
        <router-link :to="/home/message">消息</router-link>
        <router-view></router-view>
    </div>
</template>

注意：

• 哪个组件里有路由跳转，必须用<router-link>和<router-view>
• 嵌套路由中router-link的to属性需要是完整的，包含父的path

路由配置

export default {
    rules: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: '',
                    redirect: 'news'
                },
                {
                    path: 'news',
                    component: News
                },{
                    path: 'message',
                    component: Message
                }
            ]
        }
    ]
}

注意：

• 通过children配置子路由，子的path不需要前边的/
• 默认在父路由页面要展示子路由的内容，需要重定向，当url只有父路由，让重定向到某一子path,参考上图第一个child配置