Vue Router：如何向路由跳转的目标组件传递额外自定义数据？

下面是对应你场景的5种常用实现方式，可根据实际需求选择：

方案1：命名路由+params传参（参数不暴露，刷新丢失） #

适合临时传参、不需要支持页面刷新的场景，修改App.vue中router-link的to为对象写法，配合路由的name属性传参：

<div v-for="item in items" :key="item.name">
    <router-link :to="{
        name: 'Edit',
        params: {
            name: item.name,
            age: item.age
        }
    }"> Edit {{item.name}} </router-link>
</div>

在Edit组件中取值：

// 选项式API
console.log(this.$route.params.age)
// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.age)

方案2：query参数传参（参数暴露，刷新不丢失） #

适合需要支持页面刷新、不介意参数显示在URL上的场景：

<router-link :to="{
    path: `/edit/${item.name}`,
    query: {
        age: item.age
    }
}"> Edit {{item.name}} </router-link>

跳转后URL会变为/edit/Carl?age=23，取值方式：

// 选项式API
console.log(this.$route.query.age)
// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.age)

方案3：路由props解耦（代码更易维护，和路由实例解耦） #

先修改路由配置，开启props传参：

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/edit/:name",
    name: "Edit",
    component: () => import(/* webpackChunkName: "edit" */ "../views/Edit.vue"),
    // 开启props，会自动把路由参数转为组件props
    props: route => ({
      name: route.params.name,
      age: route.query.age
    })
  },
];

Edit组件直接声明props接收即可，不需要依赖路由实例：

// 选项式API
export default {
  props: ['name', 'age'],
  mounted() {
    console.log(this.age)
  }
}

// 组合式API
const props = defineProps(['name', 'age'])
console.log(props.age)

方案4：history state传参（参数不暴露，刷新不丢失） #

适合不想参数暴露在URL，同时需要支持页面刷新的场景：

<router-link :to="{
    path: `/edit/${item.name}`,
    state: {
        age: item.age
    }
}"> Edit {{item.name}} </router-link>

取值直接读取浏览器历史状态即可：

console.log(history.state.age)

方案5：全局状态管理（适合复杂业务场景） #

如果数据需要多组件共享，或者参数较多，可将items数据存在Pinia/Vuex等全局状态中，跳转后只需要通过路由拿到的name字段，去全局状态中查询对应的完整对象即可，不需要通过路由传额外参数。

内容的提问来源于stack exchange，提问作者MangalinOctos2