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

本文主要是介绍47. Vue使用children属性实现路由嵌套，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

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

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

嵌套路由示例

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

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

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

// 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: routeslinkActiveClass: "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`

<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

// 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}]},]