Vue Router 路由组件传参

Vue Router 为 Vue.js 应用提供了完整的路由解决方案，其中包括了组件间的数据传递功能。通过路由组件传参，我们可以轻松地在导航到新页面时传递必要的数据，这对于需要根据用户操作或当前状态加载数据的场景来说尤为重要。本文将深入探讨如何使用 Vue Router 进行路由组件间的传参，并通过多个示例来展示其实现方式。

基本概念与作用

动态路由参数

动态路由参数是指在定义路由时，使用路径参数的形式来指定路由路径的一部分。这些参数可以在实际导航时被具体化，并且可以通过 $route.params 对象在目标组件中获取。

查询字符串参数

除了动态路由参数之外，我们还可以通过查询字符串来传递参数。这种方式通常用于传递不需要作为 URL 路径一部分的信息。

示例一：使用动态路由参数

假设我们有一个应用程序需要显示每个用户的个人资料页面。我们可以定义一个带有动态参数的路由来实现这一点。

// 导入Vue和VueRouter
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserProfile from './components/UserProfile.vue';

Vue.use(VueRouter);

// 创建路由器实例
const router = new VueRouter({
   
  routes: [
    {
    path: '/user/:id', component: UserProfile }
  ]
});

new Vue({
   
  router,
  render: h => h(App)
}).$mount('#app');

接下来，我们需要在 UserProfile 组件中访问这个参数：

<template>
  <div>
    <p>User ID: {
   {
    $route.params.id }}</p>
  </div>
</template>

<script>
export default {
   
  created() {
   
    console.log('User ID:', this.$route