正心全栈编程-文档站

Appearance

路由嵌套 ​

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

/user/johnny/profile                     /user/johnny/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

例如 二级路由示例 - 网易云音乐 - 发现音乐

通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。

接着上节创建的 app：

router-view 嵌套架构图

1、创建需要用的所有组件

+--- /my    -- My.vue  我的音乐页
+--- /find  -- Find.vue  发现音乐页
|    +--- /recommend -- /find/recommend  -> Recommend.vue   -- 发现音乐页 / 推荐页面
|    +--- /ranking   -- /find/ranking    -> Ranking.vue     -- 发现音乐页 / 排行榜页面
|    +--- /songlist  -- /find/songlist   -> SongList.vue    -- 发现音乐页 / 歌单页面

2、main.js – 继续配置 2 级路由

一级路由 path 从 / 开始定义

二级路由往后 path 直接写名字，无需 / 开头

嵌套路由在上级路由的 children 数组里编写路由信息对象

3、说明：

App.vue 的 router-view 负责发现音乐和我的音乐页面，切换

Find.vue 的的 router-view 负责发现音乐下的，三个页面，切换

配置二级导航 ​

1、修改 src/views/Second/Find.vue 中的代码

vue
<template>
  <div>
    <p>歌单列表</p>
    <div class="nav_main">
      <router-link to="/find/recommend">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
      <router-link to="/find/songlist">歌单</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
vue
<script setup></script>
vue
<style scoped>
.nav_main {
  background-color: red;
  color: white;
  padding: 10px 0;
}

.nav_main a {
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
  margin: 7px 17px 0;
  padding: 0 15px 2px 15px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
  border-radius: 20px;
}

.nav_main a:hover {
  background-color: brown;
}

.nav_main .router-link-active {
  background-color: brown;
}
</style>

2、配置路由规则 - 二级路由展示

js
const routes = [
  { path: "/my", name: "My", component: () => import("../views/My.vue") },
  { path: "/part", name: "Part", component: () => import("../views/Part.vue") },
  // {'path': '/find', name: 'Find', component: () => import('../views/Find.vue')},
  {
    path: "/find",
    name: "Find",
    component: () => import("../views/Find.vue"),
    children: [
      {
        path: "recommend",
        component: () => import("../views/Second/Recommend.vue"),
      },
      {
        path: "ranking",
        component: () => import("../views/Second/Ranking.vue"),
      },
      {
        path: "songlist",
        component: () => import("../views/Second/SongList.vue"),
      },
    ],
  },
];

3、说明：

  • App.vue, 外层的 router-view 负责发现音乐和我的音乐页面切换

  • Find.vue 内层的 router-view 负责发现音乐下的子 tab 对应的组件切换

4、运行 - 点击导航观察嵌套路由在哪里展示

总结：嵌套路由，找准在哪个页面里写 router-view 和对应规则里写 children

类名区别 ​

目标：router-link 自带的 2 个类名的区别是什么

观察路由嵌套导航的样式

  • router-link-exact-active (精确匹配) url 中 hash 值路径，与 href 属性值完全相同，设置此类名

  • router-link-active (模糊匹配) url 中 hash 值，包含 href 属性值这个路径