vue this.$router.push跳转携带参数不暴露在url上
时间: 2023-11-24 15:50:24 浏览: 62
可以使用params方式来携带参数,这样参数就不会暴露在url上。具体实现方法如下:
```javascript
// 在跳转时传递参数
this.$router.push({
path: '/target',
params: {
id: 123
}
})
// 在目标组件中获取参数
this.$route.params.id // 输出:123
```
需要注意的是,使用params方式传递参数时,需要在路由配置中声明参数,例如:
```javascript
{
path: '/target',
name: 'target',
component: TargetComponent,
props: true // 声明使用props来接收参数
}
```
相关问题:
相关问题
vue实现this.$router.push跳转
在Vue中,可以使用`this.$router.push`来路由跳转。`this.$router`是Vue Router提供的路由实例,通过调用`push`方法可以实现跳转。
具体实现步骤如下:
1. 首先,确保已经安装并配置了Vue Router。
2. 在Vue组件中,可以通过`this.$router.push`来进行路由跳转。
3. `this.$router.push`方法接受一个参数,可以是一个字符串路径或者一个包含路径、查询参数和哈希值的对象。
4. 如果传递的是字符串路径,例如`this.$router.push('/home')`,则会跳转到指定路径。
5. 如果传递的是一个对象,例如`this.$router.push({ path: '/home', query: { id: 1 } })`,则可以指定路径以及查询参数。
6. 跳转完成后,页面会根据路由配置加载相应的组件。
vue this.$router.push 路由不跳转
可能是以下几个原因导致的:
1. 检查路由路径是否正确,是否与定义的路由一致。
2. 检查是否在路由配置中设置了对应的组件。
3. 检查是否在路由配置中设置了正确的路由模式(hash或history)。
4. 检查是否在路由配置中设置了正确的base路径。
5. 检查是否在路由配置中设置了正确的mode(开发环境或生产环境)。
如果以上都没有问题,可以尝试使用以下方法:
1. 使用this.$router.replace()方法替代this.$router.push()方法。
2. 在路由跳转前加上this.$nextTick()方法。