Vue知识整理，专题之路由：7、路由-使用children属性实现路由嵌套

被开发耽误的大厨

已于 2022-06-10 00:22:27 修改

阅读量4.2k

点赞数 8

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-30 00:10:26 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105189473

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

（1）修改routes路由匹配规则，添加 children属性

（2）创建，组件的模板对象（登录和注册组件）

（3）修改组件 Account模板对象

（4）展示、访问匹配到的login和register组件

3、最终效果展示

三、最终修改后的代码

一、前言

上两篇文章我们介绍了路由的传参：使用query方式传递路由参数、使用params方式传递路由参数，其中两种方式都没问题，大家根据个人习惯使用即可。详细可参见博文：

原创 Vue笔记整理，专题之路由：5、路由传参-使用query方式传递路由参数

原创 Vue笔记整理，专题之路由：6、路由传参-使用params方式传递路由参数

这篇文章我们将介绍：路由-使用children属性实现路由嵌套

二、使用children属性实现路由嵌套

1、路由实例简约版

之前介绍了路由的基本使用，现在我们继续写一个类似的简单实例，为了复习巩固，我把步骤简单写了一下。

然后后面会在它的基础上演示：使用children属性实现路由嵌套

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>10.路由-使用children属性实现路由嵌套</title>
  <script src="./lib/vue-2.4.0.js"></script>
  
  <!-- 步骤1: 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>

  <div id="app">

    <!-- 步骤6: 访问路由组件页面 -->
    <router-link to="/account">Account</router-link>

    <!-- 步骤5: 展示匹配到的组件 -->
    <router-view></router-view>

  </div>


  <script>

    //步骤3: 创建，组件的模板对象
    var account = {
      template: '<h1>这是 Account 账号组件</h1>'
    }

    // 步骤2: 创建一个路由对象，定义 routes路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/account',component: account}
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      //步骤4: 通过router属性，将路由规则对象，注册到 vm 实例上，
      // router: router
      router //如上面属性值和属性名完全一样，可以简写成这样。
    });

  </script>

</body>

</html>

运行程序，点击 Account以后，效果如下图：

2、使用children属性实现路由嵌套

（1）修改routes路由匹配规则，添加 children属性

（2）创建，组件的模板对象（登录和注册组件）

（3）修改组件 Account模板对象

我们准备在 account 路由下嵌套两个子路由 login、register，为了方便 account 组件模板对象嵌套，我们修改一下

由之前定义在内部

修改为定义在外部，如下图：

（4）展示、访问匹配到的login和register组件

在修改后的组件 Account模板对象里面，展示、访问匹配到的login和register组件

3、最终效果展示

运行程序，点击Account，出现如下界面：

点击登录和注册，切换到如下界面：

三、最终修改后的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>10.路由-使用children属性实现路由嵌套</title>
  <script src="./lib/vue-2.4.0.js"></script>
  
  <!-- 步骤1: 安装 vue-router 路由模块 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>

  <div id="app">

    <!-- 步骤6: 访问路由组件页面 -->
    <router-link to="/account">Account</router-link>

    <!-- 步骤5: 展示匹配到的组件 -->
    <router-view></router-view>

  </div>

  <template id="tmpl">
    <div>
      <h1>这是 Account 组件</h1>

      <!-- 访问路由组件页面：login和register -->
      <router-link to="/account/login">登录</router-link>
      <router-link to="/account/register">注册</router-link>

      <!-- 展示匹配到的组件：login和register -->
      <router-view></router-view>
    </div>
  </template>

  <script>

    //步骤3: 创建，组件的模板对象
    var account = {
      //template: '<h1>这是 Account 账户组件</h1>'
      template: '#tmpl'
    }

    var login = {
      template: '<h3>登录组件</h3>'
    }

    var register = {
      template: '<h3>注册组件</h3>'
    }

    // 步骤2: 创建一个路由对象，定义 routes路由匹配规则
    var router = new VueRouter({
      routes: [
        {
          path: '/account', component: account,
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
          // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      //步骤4: 通过router属性，将路由规则对象，注册到 vm 实例上，
      // router: router
      router //如上面属性值和属性名完全一样，可以简写成这样。
    });

  </script>

</body>

</html>