Vue 3 中的嵌套路由实现与使用

在 Vue 3 中，嵌套路由允许我们在一个路由组件内部定义子路由，从而实现更复杂的页面结构。例如，一个新闻列表页面可以包含多个新闻详情页面，这些详情页面可以通过嵌套路由来实现。

一、问题引入

假设你正在开发一个新闻应用，包含以下功能：

1. 新闻列表页面：显示新闻标题列表。

2. 新闻详情页面：点击新闻标题时，显示该新闻的详细内容。

3. 嵌套路由：新闻详情页面是新闻列表页面的子页面。

那么，如何实现嵌套路由呢？

二、实现嵌套路由的基本步骤

1. 定义路由规则

在 router/index.ts 中定义嵌套路由规则。假设我们有 News.vue 作为新闻列表页面，Detail.vue 作为新闻详情页面。

router/index.ts：

TypeScript复制

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Detail from '../pages/Detail.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  {
    path: '/news',
    component: News,
    children: [
      { path: 'detail', component: Detail },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

这里的children里配置的就是嵌套页面的路由信息了。

2. 创建新闻列表组件

在 News.vue 中，动态生成新闻列表，并为每个新闻项添加路由链接。

News.vue：

vue复制

<template>
  <div>
    <h2>新闻列表</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <router-link :to="`/news/detail?id=${news.id}`">{{ news.title }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newsList = ref([
      { id: '001', title: '十种抗癌食物', content: '西兰花是一种很好的抗癌食物。' },
      { id: '002', title: '如何一夜暴富', content: '你需要IT技能。' },
      { id: '003', title: '万万没想到', content: '明天是周一。' },
      { id: '004', title: '好消息！', content: '快过年了。' },
    ]);

    return { newsList };
  },
};
</script>

这里要注意router-link中to的写法，使用了模板字符串，模板字符串使用反引号（```）定义，并允许在字符串中嵌入表达式。嵌入的表达式用 ${} 包裹。这样to就不会认为都是字符串了

这里是传的id，如果有多个参数的话，我们可以用&来拼接，但有更优雅的写法：

<template>
  <div>
    <h2>新闻列表</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <router-link :to="{ path: '/news/detail', 
                          query: { 
                            id: news.id, 
                            title: news.title, 
                            content: news.content 
                          } }">
          {{ news.title }}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

看起来是不是比刚才优雅很多。

3. 创建新闻详情组件

在 Detail.vue 中，根据路由参数动态显示新闻详情。

Detail.vue：

vue复制

<template>
  <div>
    <h3>新闻详情</h3>
    <p>ID: {{ query.id }}</p>
    <p>标题: {{ query.title }}</p>
    <p>内容: {{ query.content }}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    //const query = route.query;
    const { query } = toRefs(route);
    return { query };
  },
};
</script>

在 Detail.vue 中，通过 useRoute 获取 query 参数。但是这里要注意，如果直接解构 route.query，会导致 query 失去响应式。因此需要使用 toRefs 包裹 route，确保 query 保持响应式。这样就完美了

三、嵌套路由的特点

4. 子路由的路径：子路由的路径是相对于父路由的，不需要重复父路由的路径。

5. 嵌套的 <router-view>：在父路由组件中使用 <router-view> 来显示子路由组件。

6. 动态参数：可以通过 query 或 params 传递动态参数。

四、解决控制台警告

在项目启动时，控制台可能会警告 / 路径没有对应的组件。可以通过以下方式解决：

7. 重定向：在路由规则中添加一个重定向规则。

8. 默认路由：直接将 / 路径映射到一个默认组件。

示例：

TypeScript复制

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About },
  {
    path: '/news',
    component: News,
    children: [
      { path: 'detail', component: Detail },
    ],
  },
];

这里有一个重定向，也就是如果是访问根目录的话，会重定向到/home=页面中。

五、总结

嵌套路由是 Vue Router 的一个重要特性，允许在路由中定义子路由，从而实现更复杂的页面结构。通过合理使用嵌套路由，可以实现更灵活的导航逻辑和页面布局。query 参数：通过 URL 的查询字符串传递参数，适合简单的场景。

• 传参方式：可以通过字符串拼接或对象写法传递 query 参数。

• 接收参数：通过 useRoute 获取 query 参数，并确保其保持响应式。