接收页面怎么拿到this.$router.push携带参数
时间: 2023-10-13 16:06:20 浏览: 58
可以通过$route对象来获取携带的参数。
在接收页面的created钩子函数中,可以使用this.$route.params来获取路由参数,例如:
```javascript
created() {
console.log(this.$route.params.id);
}
```
其中,id就是通过this.$router.push携带的参数。如果需要获取query参数,可以使用this.$route.query。
相关问题
vue this.$router.push跳转携带参数不暴露在url上
可以使用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跳转页面携带参数并接收
在 Vue 中,可以通过使用路由的方式来实现页面跳转并携带参数。下面是一个示例:
1. 在路由配置文件中定义需要传递参数的路由:
```javascript
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import MyComponent from './components/MyComponent.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/my-component/:id', // 使用冒号定义参数
name: 'MyComponent',
component: MyComponent
}
]
});
```
2. 在源页面中进行跳转并传递参数:
```javascript
// SourceComponent.vue
export default {
methods: {
goToMyComponent() {
const id = 1; // 假设传递的参数为1
this.$router.push({ name: 'MyComponent', params: { id } });
}
}
};
```
3. 在目标页面中接收参数:
```javascript
// MyComponent.vue
export default {
mounted() {
const id = this.$route.params.id;
// 根据传递的参数id进行相关逻辑处理
}
};
```
通过以上步骤,源页面可以跳转到目标页面并携带参数,目标页面可以通过 `$route.params` 获取传递的参数进行后续处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)