vue的this.$router.push的用法说明
时间: 2023-09-08 07:13:33 浏览: 306
`this.$router.push` 是 Vue Router 提供的方法,用于在 Vue 实例中进行页面跳转。
它的用法如下:
```javascript
this.$router.push(location, onComplete?, onAbort?)
```
- `location`:要跳转的目标路由的路径,可以是一个字符串或一个描述目标位置的对象。例如,字符串 `'/home'` 或者 `{ path: '/home' }`。
- `onComplete`(可选):跳转完成后的回调函数。
- `onAbort`(可选):跳转终止时的回调函数。
示例:
```javascript
// 字符串形式
this.$router.push('/home');
// 对象形式
this.$router.push({ path: '/home' });
// 带参数的路由
this.$router.push({ name: 'user', params: { id: 123 } });
// 完成跳转后的回调
this.$router.push('/home', () => {
console.log('跳转完成');
});
// 跳转被终止时的回调
this.$router.push('/home', null, (error) => {
console.log('跳转被终止', error);
});
```
通过调用 `this.$router.push` 可以实现页面的切换或路由导航。需要注意的是,该方法只能在 Vue 实例中使用,并且需要在使用之前确保 Vue Router 已经被正确安装和配置。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)