vue之router-link页面跳转及传参

在Vue中，使用<router-link>组件可以实现页面间的导航，并且可以通过to属性传递参数。

<template>
  <div>
    <!-- 跳转到/user页面，并传递userId参数 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User 123</router-link>
 
    <!-- 使用路径查询(query)传递参数 -->
    <router-link :to="{ path: '/user', query: { userId: 456 }}">User 456</router-link>
  </div>
</template>

在路由配置中，你需要定义相应的路由参数：

const routes = [
  {
    path: '/user',
    name: 'user',
    component: UserComponent,
    // 使用params传递参数时，需要配置如下
    props: true
  },
  // ... 其他路由
];

接下来，在组件中，你可以通过this.$route.params.userId或this.$route.query.userId来获取传递的参数。

export default {
  props: ['userId'], // 当使用props传递参数时需要定义props
  created() {
    // 获取params参数
    console.log('Params:', this.$route.params.userId);
 
    // 获取query参数
    console.log('Query:', this.$route.query.userId);
  }
};

以上代码展示了如何使用router-link组件进行页面跳转，并通过不同的方式传递参数。