vue-router跳转传参编程式

使用 Vue Router 进行编程式导航并传递参数
在 Vue.js 应用程序中，通过 vue-router 实现编程式导航可以灵活控制页面之间的跳转逻辑。编程式导航允许开发者通过 JavaScript 方法触发路由变化，而不是依赖于 <router-link> 组件。
编程式导航基础
为了执行编程式导航，通常会使用 $router.push() 或者其他类似的 API 函数[^2]。这些方法能够改变当前的应用路径而无需重新加载整个页面。
路由配置示例
下面是一个简单的路由配置例子，在此配置基础上展示如何进行带参的编程式导航：
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
{
path: '/',
name: 'Home',
redirect: '/userList'
},
{
path: '/userList',
name: 'UserList',
component: () => import('../views/user/UserList') // 动态导入组件
},
{
path: '/user/:id', // 定义动态段 :id 来接收参数
name: 'UserProfile',
component: () => import('../views/user/UserProfile'),
props: true // 启用将 URL 参数作为 prop 自动绑定给目标组件的功能
}
];

export default new VueRouter({
mode: 'history', // 移除URL中的#
base: process.env.BASE_URL,
routes
});
登录后复制
编程式导航与传参实践
假设有一个场景是从用户列表页(UserList)点击某个用户的链接进入该用户的个人资料页(UserProfile)，此时可以通过编程方式携带用户ID(userId)前往指定的目标路由。
方案一：利用 params 传递单个 ID 值
当定义好带有冒号前缀的动态部分 /user/:id 的时候，就可以很方便地向 UserProfile 页面发送特定 id 的值了。
// 在 UserList.vue 文件内某处触发事件处理函数
methods: {
goToUserProfile(userId){
this.$router.push({
name: 'UserProfile',
params: { id: userId } // 将 userId 作为 param 发送出去
});
}
}
登录后复制
注意这里使用的是命名路由的形式 (name:'UserProfile') 并且指定了要传送的具体参数名和对应的变量值。
如果希望直接操作路径字符串，则应采用如下形式：
this.$router.push(`/user/${userId}`);
登录后复制
但是这种方式下无法访问到 params 数据，除非再次解析 url 获取其中的信息。
方案二：借助 query 添加查询字符串
另一种常见的做法是在 URL 上附加查询参数，这使得 URL 更加直观易读，并且可以直接分享含有具体条件的链接地址。
this.$router.push({
path: '/user/profile',
query: { user_id: userId, action: 'view' } // 可以附带多个键值对
});
登录后复制
这样形成的最终 URL 类似于 /user/profile?user_id=1&action=view ，可以在任何地方轻松复制粘贴这个完整的 URL 访问相同的资源。
对于接收到参数的一方来说，无论是哪种情况都可以通过 this.$route.params 或者 this.$route.query 来获取相应的数据[^4]。