Vue Router 中的 params 参数传参

Vue Router 中的 params 参数传参

我们知道，Vue Router 的query可以传参，而params 参数是 Vue Router 提供的一种传参方式，通过路径的一部分来传递参数。它通常用于更复杂的路由场景，如嵌套路由或动态路径。

一、问题引入

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

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

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

3. 传参：通过 params 参数传递新闻的 id、title 和 content。

那么，如何实现通过 params 参数进行传参呢？

二、实现 params 参数传参

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/:id/:title/:content', component: Detail, name: 'Detail' },
    ],
  },
];

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

export default router;

传递params参数时，需要在路由规则中占位

2. 新闻列表组件

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

News.vue：

vue复制

<template>
  <div>
    <h2>新闻列表</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <router-link :to="{ name: 'Detail', params: { id: news.id, title: news.title, content: news.content } }">
          {{ 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>

兄弟们有没有发现，这里params的对象写法对应的是name而不是path，如果我们要params的对象写法，必须要用name了，就不能用path了

当然，这里还有一种字符串写法，

        <router-link :to="`/news/detail/${news.id}/${news.title}/${news.content}`">
          {{ news.title }}
        </router-link>

这种写法可能实现页面的跳转，但不如第一种灵活

3. 新闻详情组件

在 Detail.vue 中，通过 params 参数动态显示新闻详情。

Detail.vue：

vue复制

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

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

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

三、注意事项

4. 路径占位：

• 在路由规则中，必须为 params 参数占位，例如 :id、:title、:content。

• 占位符必须与传递的参数名称一致。

5. 使用 name 而非 path：

• 在 router-link 中，必须使用 name 而非 path，否则 params 参数将被忽略。

6. 参数的可选性：

• 如果某些参数可能不存在，可以在路径中为这些参数添加问号 ?，表示该参数是可选的。例如：

{ path: 'detail/:id/:title/:content?', component: Detail, name: 'Detail' }

7. 不能传递对象或数组：

• params 参数不能传递对象或数组，只能传递字符串或数字。

四、总结

• params 参数：通过路径的一部分传递参数，适用于嵌套路由或动态路径。

• 传参方式：在 router-link 中使用 name 和 params。

• 接收参数：通过 useRoute 获取 params 参数。

• 注意事项：路径中必须占位，使用 name 而非 path，参数可选性通过问号 ? 表示。