Vue——Router（路由跳转传参）_vue 路由参数自动拼下一个页面-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_Sandy/article/details/88235473

本文详细介绍了在Vue.js中进行页面跳转时的三种传参方法：路径传参、params传参和query传参。每种方法都有其适用场景和特点，通过实例展示了如何在路由配置和组件中正确使用这些传参方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue的页面跳转中，有三种传参方法：

1、路径传参

在配置路由时，我们可以配置可传参的路由（path中的id即为路径跳转中的参数），使用这种方法时，我们需要如下面的代码方式配置路由。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

<router-link to="{path:'/user/123'}">下一页</router-link>
router.push({ path: '/user/123'}) //123为路由传递的参数

下一个页面在route的param中获取参数

$route.params.id

2、params传参

在进行路由跳转时，在跳转代码中添加params属性，params中就是要传递的参数

<router-link to="{name:'user',params:{id:'123'}}">下一页</router-link>
//在to方式跳转页面时，跳转参数需要提供name值进行跳转，不可提供path，因为在提供path的情况下，params会被忽略
//（提供path会默认是方法1的传值，忽略params）

router.push({ name: 'user', params: { id: '123' }})

下一个页面在route的params中获取参数

$route.params.id

3、query传参

在进行路由跳转时，在跳转代码中添加query属性，query中就是要传递的参数（与params用法类似）

<router-link to="{path:'user',query:{id:'123'}}">下一页</router-link>
//与params的区别在于，query传值时，没有path的限制；也就是说可以提供path值作为跳转依据

router.push({ path: 'user', query: { id: '123' }})

下一个页面在route的query中获取参数