###
Vue2 中 `
this.$router.push` 的用法解释
在
Vue2 中，`
this.$router.push` 是一种用于程序化导航的方法，允许开发者通过
JavaScript 实现页面之间的跳转。它不仅可以完成简单的路由切换，还可以携带参数以便目标页面
使用这些数据。
#### 1
. 基本语法
`
this.$router.push` 方法可以接受多种类型的参数，包括字符串、对象等。以下是常见的几种形式及其作用：
- **字符串路径**
```
javascript
this.$router.push('/home');
```
这种方式直接指定要跳转的目标路径[^1]。
- **对象路径**
```
javascript
this.$router.push({ path: '/home' });
```
使用对象的形式更加灵活，可以通过 `path` 属性指定目标路径[^1]。
- **命名路由**
如果在路由配置中设置了 `name` 属性，则可以通过命名路由的方式进行跳转：
```
javascript
this.$router.push({ name: 'Home' });
```
此处的 `'Home'` 应与路由配置中的 `name` 属性一致[^1]。
#### 2
. 参数传递
除了基本的路径跳转外，`
this.$router.push` 还支持带参数的跳转。
Vue 提供了两种主要的方式来传递参数：`query` 和 `params`。
- **Query 参数**
Query 参数会附加到 URL 上作为查询字符串的一部分，适合公开的数据传输场景。
```
javascript
this.$router.push({ path: '/target', query: { id: 1, name: 'John' } });
```
在目标页面中，可以通过 `
this.$route
.query` 获取传递过来的参数：
```
javascript
const id =
this.$route
.query
.id; // 1
const name =
this.$route
.query
.name; // 'John'
```
- **Params 参数**
Params 参数不会直接显示在 URL 中，而是通过路由匹配机制隐式传递给目标组件。这种方式通常适用于动态路由场景。
```
javascript
this.$router.push({ name: 'target', params: { id: 1, name: 'John' } });
```
在目标页面中，可以通过 `
this.$route
.params` 获取传递过来的参数：
```
javascript
const id =
this.$route
.params
.id; // 1
const name =
this.$route
.params
.name; // 'John'
```
需要注意的是，当
使用 `params` 方式时，必须配合命名路由（`name`），而不能单独
使用 `path`[^2]。
#### 3
. 示例代码
以下是一个完整的示例，演示如何在
Vue2 中
使用 `
this.$router.push` 并传递参数：
##### 路由配置
```
javascript
//
router/index
.js
import
Vue from '
vue';
import
Router from '
vue-
router';
import TargetPage from '@/components/TargetPage
.vue';
Vue.use(
Router);
export default new
Router({
routes: [
{
path: '/target/:id', // 动态路由
name: 'target',
component: TargetPage,
},
],
});
```
##### 发起跳转
```
javascript
methods: {
navigateToTarget
() {
//
使用 query 参数
this.$router.push({ path: '/target', query: { id: 1, name: 'John' } });
// 或者
使用 params 参数
this.$router.push({ name: 'target', params: { id: 1, name: 'John' } });
},
},
```
##### 目标页面接收参数
```
javascript
<template>
<div>
<p>ID: {{ $route
.params
.id }}</p>
<p>Name: {{ $route
.query
.name }}</p>
</div>
</template>
<script>
export default {
mounted
() {
console
.log(
this.$route
.params); // 输出 { id: '1', name: 'John' }
console
.log(
this.$route
.query); // 输出 { id: '1', name: 'John' }
},
};
</script>
```
---
###
本文介绍了在Vue项目中如何使用this.$router.push()进行内部路由跳转，并解释了为何这种方式不适用于外部链接的跳转。对于外部链接，推荐使用window.location.href或者a标签来实现。
扫一扫
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
