Vue 中如何进行路由传参与接收参数

在 Vue 开发中，路由传参和接收参数是非常常见且重要的操作，它能够实现组件之间的数据交互和页面的动态展示。

路由传参的方式

1. 路径参数

路径参数是将参数作为 URL 的一部分。在定义路由时，使用冒号（:）来标识参数。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

在跳转路由时，可以这样传递参数：

<router - link :to="`/user/${userId}`">用户详情</router - link>

或者在 JavaScript 中：

this.$router.push(`/user/${userId}`);

2. 查询参数

查询参数通过 URL 中的问号（?）来添加。例如：

<router - link :to="{ path: '/product', query: { id: productId, name: productName } }">产品详情</router - link>

在 JavaScript 中：

this.$router.push({ path: '/product', query: { id: productId, name: productName } });

接收参数的方法

1. 接收路径参数

在组件中，可以通过 this.$route.params 来接收路径参数。例如：

export default {
  created() {
    const userId = this.$route.params.id;
    console.log('用户 ID:', userId);
  }
};

2. 接收查询参数

通过 this.$route.query 来接收查询参数。例如：

export default {
  created() {
    const productId = this.$route.query.id;
    const productName = this.$route.query.name;
    console.log('产品 ID:', productId);
    console.log('产品名称:', productName);
  }
};

注意事项

在使用路径参数时，要确保参数的唯一性，以免造成路由匹配混乱。而查询参数则更适合传递一些非关键、可选项的参数。另外，当路由切换时，如果参数发生了变化，组件可能不会重新渲染。此时，可以通过 watch 监听 $route 的变化来处理新的参数：

export default {
  watch: {
    '$route'(to, from) {
      const newParam = to.params.id;
      console.log('新的参数:', newParam);
    }
  }
};

掌握 Vue 中的路由传参与接收参数，能极大提升开发效率，让应用的数据交互更加流畅，为用户提供更优质的体验。