VUE路由传参跳转_vue 页面 name+params-优快云博客

本文链接：https://blog.youkuaiyun.com/TimEsAme/article/details/121179919

本文详细介绍了Vue中路由传参的几种方式，包括通过`name`、`path`、`query`和`params`进行声明式导航和编程式导航。讲解了如何在`router-link`和`$router.push`中使用这些参数进行跳转，并展示了如何在目标组件中接收和使用传递的参数。强调了动态参数和命名路由的重要性，以及使用`params`时需要注意的路径规则。

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

首先要知道name属性和path是啥

name：路由配置名称，也就是【命名路由】

path：路由配置的路由参数

$router 和 $route

$router ：是指整个路由实例,你可以操控整个路由，包括常用的push，replace，go方法。

$route：是指当前路由实例$router跳转到的路由对象；路由实例可以包含多个路由对象，它们是父子包含关系，包括常用的query，params接收传递来的参数

声明式导航传参跳转

1、查询参数：path+query组合

接收的时候使用key名接收数据，数据可以是变量，下图中jojo就是变量，变量在data中声明。

<router-link :to="{ path: '/freeTwo', query: { uname: jojo } }">
点击跳转
</router-link>

// 接收：<h1>{{ $route.query.uname }}</h1>

2、查询参数,路由命名：name+query组合

此方法要在路由中配置name属性，接收和使用和上面一样

// 在router/index.js中配置路由名
{
   name: 'freeOne',
   path: '/freeOne',
   component: () => import('../components/free/freeOne.vue')
},

<router-link :to="{ name: 'freeOne', query: { uname: jojo } }">
 点击跳转
</router-link>

// 接收：<h1>{{ $route.query.uname }}</h1>

3、动态参数，路由命名：name+params组合

此方法要在路由中配置name和要动态参数的具体值

{
  name: 'freeOne',
  path: '/freeOne/:uname',
  component: () => import('../components/free/freeOne.vue')
},


<router-link :to="{ name: 'freeOne', params: { uname: jojo } }">
点击跳转
</router-link>

// 接收：<h1>{{ $route.params.uname}}</h1>

格外注意: 使用path会自动忽略params，收不到参数的，不要用path加params 。

编程式导航传参跳转

1、路由命名：name+params组合

此方法要在路由在配置name属性，根据属性名匹配规则，携带的参数可以是变量，变量要在data中声明。

//给标签绑定点击事件
<button @click="Jump">点击跳转</button>

//在methods中定义跳转函数
Jump() {
 this.$router.push({ name: 'freeOne', params: { uname: this.jojo} })
},

// 接收：<h1>{{ $route.params.uname}}</h1>

2、查询参数：path+query组合

//给标签绑定点击事件
<button @click="Jump">点击跳转</button>

//在methods中定义跳转函数
Jump() {
   this.$router.push({ path: '/freeTwo', query: { uname: this.jojo } })
},

// 接收：<h1>{{ $route.params.uname}}</h1>