vue 路由嵌套

关键词：children children属性与path和component同级使用

1、在routes中加入children属性

    const router = new VueRouter({
      routes: [
        {
          path: "/",
          redirect: "/index",
        },
        // 首页
        {
          path: "/index",
          component: home,
          // children用于嵌套mine
          // 第一层嵌套
          children: [
            // 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
            {
              path: "mine",
              component: mine,
            }
          ],
        },
        // 个人中心
        {
          path: "/mine",
          component: mine,
          
        },
        // courseDetail
        {
          path: "/courseDetail",
          component: courseDetail,
        },
      ],
    });

2、在template中加入展示区域 <router-view></router-view>

<template id="home">
    <div>
      首页
      <!-- 第一层嵌套展示区域 -->
      <router-view></router-view>
    </div>
  </template>

3、在浏览器中输入嵌套

完整代码示例：

<!DOCTYPE html>
<html>

<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></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 1 引入路由 -->
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 设置路由高亮 -->
  <style>
    .router-link-active {
      color: red;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div id="app">
    <router-link to="/mine"> 个人中心</router-link>
    <router-link to="/index"> 首页</router-link>
    <router-link to="/courseDetail"> courseDetail</router-link>
    <router-view></router-view>
  </div>

  <template id="home">
    <div>
      首页
      <!-- 第一层嵌套展示区域 -->
      <router-view></router-view>
    </div>
  </template>
  <template id="mine">
    <div>个人中心
      <!-- 第二层嵌套展示区域 -->
      <router-view></router-view>
    </div>
    
  </template>

  <template id="courseDetail">
    <div>courseDetail</div>
  </template>

  <script>
    let home = {
      template: "#home",
    };
    let mine = {
      template: "#mine",
    };

    let courseDetail = {
      template: "#courseDetail",
    };

    const router = new VueRouter({
      routes: [
        {
          path: "/",
          redirect: "/index",
        },
        // 首页
        {
          path: "/index",
          component: home,
          // children用于嵌套mine/courseDetail
          // 第一层嵌套
          children: [
            // 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
            {
              path: "mine",
              component: mine,
              // 第二层嵌套courseDetail
              children: [
                {
                  path: "courseDetail",
                  component: courseDetail,
                },
              ],
            },
            {
              path: "courseDetail",
              component: courseDetail,
            },
          ],
        },
        // 个人中心
        {
          path: "/mine",
          component: mine,
          
        },
        // courseDetail
        {
          path: "/courseDetail",
          component: courseDetail,
        },
      ],
    });
    const vm = new Vue({
      el: "#app",
      data: {},
      router,
      methods: {},
    });
  </script>
</body>

</html>

输出结果：

vue 路由嵌套

推荐阅读