this.$router.push如何新开一个页面并传参
时间: 2023-10-13 17:24:53 浏览: 34
可以通过在 `push` 方法中使用 `query` 或 `params` 参数来传递参数,同时使用 `target` 属性来指定在新窗口中打开页面。
示例代码:
```javascript
this.$router.push({
path: '/new-page', // 新页面的路由路径
query: {
id: '123', // 参数1
name: 'example' // 参数2
},
target: '_blank' // 在新窗口中打开
})
```
在新页面中可以通过 `this.$route.query` 或 `this.$route.params` 来获取传递的参数。其中,`query` 传递的参数是以查询字符串的形式出现在 URL 中的,而 `params` 则是以路由参数的形式出现在 URL 中的。
注意:在使用 `target` 属性时,需要注意浏览器的安全设置,可能会阻止页面在新窗口中打开。
相关问题
this.$router.push query传参
this.$router.push方法是Vue Router提供的一种导航方法,用于在Vue.js应用程序中进行页面导航。通过使用query参数,可以在路由之间传递参数。
以下是一个示例,演示了如何使用this.$router.push方法传递query参数:
```javascript
// 在当前页面中使用this.$router.push方法传递query参数
this.$router.push({ path: '/xxx', query: { idname: id } });
```
在上述示例中,我们将id作为参数传递给了名为idname的query参数。在目标页面中,可以通过this.$route.query.idname来获取传递的参数值。
请注意,query参数是以键值对的形式传递的,可以传递多个参数。在目标页面中,可以通过this.$route.query来访问所有的query参数。
this.$router.push 传参
this.$router.push可以用于在Vue.js中进行路由跳转,并且可以传递参数。
要传递参数,你可以将参数作为一个对象传递给this.$router.push的第二个参数。例如:
```javascript
this.$router.push({
path: '/destination',
query: { key: value }
})
```
在目标路由组件中,你可以使用this.$route.query来获取传递的参数。例如:
```javascript
// 在目标路由组件中获取参数
this.$route.query.key // 获取参数值
```
请注意,传递的参数会作为查询字符串追加在URL后面,因此在目标路由组件中可以通过this.$route.query来获取参数值。