Vue this.$router.push()
时间: 2023-11-07 07:03:39 浏览: 50
Vue中的this.$router.push()方法用于在路由之间进行导航。通过该方法可以实现多种导航方式,包括字符串、对象和命名路由等。具体的使用方式如下:
1. 字符串路径导航:使用字符串作为参数,将目标路径传递给push()方法,例如:this.$router.push('home')。
2. 对象路径导航:使用对象作为参数,可以指定目标路径的各种属性,例如:this.$router.push({path:'home'})。
3. 命名路由导航:使用对象作为参数,通过name属性指定目标路由的名称,例如:this.$router.push({name:'user', params:{userId: '123'}})。
4. 带查询参数的导航:使用对象作为参数,通过query属性传递查询参数,例如:this.$router.push({path:'register', query:{plan:'private'}})。
综上所述,Vue的this.$router.push()方法提供了多种方式来实现路由导航,可以根据需要选择合适的方式进行使用。
相关问题
vue this.$router.push
`this.$router.push` 是 Vue.js 中用于进行路由导航的方法。它用于在当前路由上进行导航到不同的页面。
使用 `this.$router.push` 方法可以传入一个路由对象或者一个路径字符串,示例如下:
```javascript
// 导航到命名路由
this.$router.push({ name: 'routeName' });
// 导航到带有参数的路由
this.$router.push({ path: '/route/path', params: { id: 1 } });
// 导航到指定 URL
this.$router.push('/route/path');
```
在 Vue 组件中,`this.$router` 可以访问到 Vue Router 的实例,通过调用 `push` 方法来进行页面导航。
vue this.$router.push页面不刷新
根据提供的引用内容,有多种解决方式可以解决vue this.$router.push页面不刷新的问题。以下是其中的三种解决方式:
1. 使用`this.$router.go(0)`方法刷新页面:
```javascript
watch: {
'$route' (to, from) {
// 路由发生变化页面刷新
this.$router.go(0);
}
}
```
2. 在`mounted`函数中调用需要刷新的方法:
```javascript
watch: {
'$route' (to, from) {
// 在mounted函数执行的方法,放到该处
this.getTableData();
}
}
```
3. 使用`v-if`控制DOM来实现页面刷新:
```html
<template>
<div v-if="show">
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
watch: {
'$route' (to, from) {
// 路由发生变化时,修改show的值来刷新页面
this.show = false;
this.$nextTick(() => {
this.show = true;
});
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)