47. Vue使用children属性实现路由嵌套

前言

前面基本演示完了vue-router的基本用法，但是当组件之间嵌套子组件，这个嵌套的路由该怎么写呢？

可能这一句话不能够直接说明情况，下面来直接看例子。

嵌套路由示例

1.首先写三个组件，一个account组件，另外两个子组件login和register

代码语言：javascript复制

        <script>        
            
            // 1. 定义 (路由) 组件。
            // 可以从其他文件 import 进来
            
            // 创建account组件
            var account = {
                template: "#account",
            }
            
            // 创建登陆组件login
            var login = {
                template: "<h3>登陆组件</h3>",
            }
            
            // 创建注册组件register
            var register = {
                template: "<h3>注册组件</h3>",
            }

2.编写这三个组件的路由规则，如下：

代码语言：javascript复制

            // 2. 定义路由
            // 每个路由应该映射一个组件。 其中"component" 可以是
            // 通过 Vue.extend() 创建的组件构造器，
            // 或者，只是一个组件配置对象。
            // 我们晚点再讨论嵌套路由。
            var routes = [
              { path: '/', redirect: '/account' },
              { path: '/account', component: account },
              { path: '/account/login', component: login },
              { path: '/account/register', component: register },
            ]
            
            // 3. 创建 router 实例，然后传 `routes` 配置
            // 你还可以传别的配置参数, 不过先这么简单着吧。
            var router = new VueRouter({
              routes, // (缩写) 相当于 routes: routes
              linkActiveClass: "myactive", // 自定义选中的class
            })
            
            // 创建vue的实例
            var vm = new Vue({
                el: '#app',
                data: {},
                methods:{},             
                // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
                components:{},
                // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
                router,  // 等价于 router: router
            })
            
        </script>

可以从上面看到，我在写regster和login的路由路径是/account/register和/account/login，其实跟/account路由没有太大的关系。

只是简单写了个前缀而已。

3.编写组件展示的`router-view`

代码语言：javascript复制

        <div id="app">
            
            <router-link to="/account">Account</router-link>
            
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <transition mode="out-in">
                <router-view></router-view>
            </transition>
            
        </div>

        <template id="account">
            <div>
                <h1>这是 Account 组件</h1>
                
                <!-- 设置嵌套组件的跳转标签 -->
                <router-link to="/account/login">登录</router-link>
                <router-link to="/account/register">注册</router-link>
                
                <!-- 设置嵌套组件的router-view -->
                <router-view></router-view>
            </div>
        </template>

可以看到，父组件app下只能直接访问account组件，然后再通过account组件访问login和register嵌套组件。

下面来看看效果。

4.在浏览器中点击`登陆`组件，确认是否在`account`组件下，显示`登陆`组件。

image-20200222223639400

实际效果如下：

image-20200222223728252

5.使用`children`属性，修改嵌套路由规则

image-20200222224024009

代码语言：javascript复制

            // 2. 定义路由
            // 每个路由应该映射一个组件。 其中"component" 可以是
            // 通过 Vue.extend() 创建的组件构造器，
            // 或者，只是一个组件配置对象。
            // 我们晚点再讨论嵌套路由。
            var routes = [
                {
                    path: '/',
                    redirect: '/account'
                },
                {
                    path: '/account',
                    component: account,
                    // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
                    // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
                    children: [
                        {
                            path: 'login',
                            component: login
                        },
                        {
                            path: 'register',
                            component: register
                        }
                    ]
                },
            ]