vue2路由跳转传参
时间: 2025-04-29 15:46:00 浏览: 30
### Vue2 中的路由跳转与传参
在 Vue2 中实现路由跳转并传递参数主要分为两种方式:`query` 和 `params`。
对于 **普通路由** 的情况:
当采用 `query` 方式时,可以通过如下代码片段来完成页面间的导航以及数据传输[^1]:
```javascript
// 使用 query 进行路由跳转并携带参数
this.$router.push({
path: '/about',
query: {
title: '666'
}
});
```
而如果选择使用 `params` 来作为参数传递手段,则应按照下面的方式编写代码:
```javascript
// 利用 params 实现带参跳转
this.$router.push({
name: 'home', // 需要指定路由的名字而非路径
params: {
title: 'about'
}
});
```
针对 **动态路由匹配** 场景下,可以在定义路由的时候设置带有占位符的 URL 模板,在实际应用过程中替换这些占位符即可达到目的:
#### 定义路由规则前需导入必要的模块,并创建路由器实例[^2]
```javascript
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: [
{
path: '/user/:id', // 动态部分以冒号开头 (:id)
component: UserComponent,
children: [{
path: '', // 默认子路径
component: UserProfile
}]
},
/* ...其他路由配置 */
]
});
export default router;
```
之后就可以像这样来进行基于动态路由的跳转操作了:
```javascript
// 对于已知 id 值的情况可以直接写死或者变量代替
this.$router.push({name: 'user', params: {id: userId}});
```
为了能够获取到上一步所传递过来的数据,在目标组件内部可以借助 `$route` 属性访问它们。例如读取通过 `query` 或者 `param` 发送的信息[^3]:
```javascript
// 获取查询字符串中的参数
let paramValueFromQuery = this.$route.query.title;
// 获取命名路由中定义的参数
let paramValueFromParams = this.$route.params.id;
```
以上就是在 Vue2 中利用 vue-router 库执行路由跳转的同时附带额外信息的具体做法。
阅读全文
相关推荐

















