query 参数

传递参数

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
  跳转
</router-link>

<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink
  :to="{
    //name:'xiang', //用name也可以跳转
    path: '/news/detail',
    query: {
      id: news.id,
      title: news.title,
      content: news.content,
    },
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import { useRoute } from "vue-router";
const route = useRoute();
// 打印query参数
console.log(route.query);

params 参数

传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>

<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink
  :to="{
    name: 'xiang', //用name跳转
    params: {
      id: news.id,
      title: news.title,
      content: news.title,
    },
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import { useRoute } from "vue-router";
const route = useRoute();
// 打印params参数
console.log(route.params);

备注 1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注 2：传递params参数时，需要提前在规则中占位。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24