vue3 外部跳转 获取url携带的参数
时间: 2023-12-12 19:04:54 浏览: 95
要获取 URL 中携带的参数,可以使用以下代码:
```javascript
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
```
这里,`window.location.search` 可以获取当前页面 URL 中 `?` 后面的参数部分,包括 `?`。然后,使用 `URLSearchParams` 对象来解析参数,使用 `get()` 方法获取指定参数的值。例如,获取参数名称为 `myParam` 的值,可以使用 `urlParams.get('myParam')`。
相关问题
vue3路由跳转携带参数
在Vue 3中,你可以使用Vue Router来进行路由导航,并且可以携带参数。以下是一个示例代码:
1. 在导航源组件中,使用`this.$router.push`方法来进行路由跳转,并在该方法的第一个参数中指定目标路由的路径。此外,你还可以在第二个参数中传递一个对象,用于携带参数。
```javascript
// 源组件
this.$router.push({ path: '/destination', query: { param1: 'value1', param2: 'value2' }});
```
2. 在目标组件中,你可以通过`this.$route.query`属性来访问传递的参数。
```javascript
// 目标组件
console.log(this.$route.query.param1); // 输出 'value1'
console.log(this.$route.query.param2); // 输出 'value2'
```
请注意,这里使用了`query`属性来传递参数,这将把参数附加在URL的查询字符串中。如果你想要将参数直接嵌套在URL中,可以使用`params`属性进行设置和获取。
在此示例中,目标URL将会是`/destination?param1=value1¶m2=value2`。如果你的目标URL是`/destination/:param1/:param2`,那么可以使用`params`属性来传递参数。
希望这对你有所帮助!如果你还有其他问题,请随时提问。
VUE3 页面跳转携带参数
在 Vue3 中,可以使用 `router.push` 方法进行页面跳转,并且可以通过第二个参数传递参数。例如:
```javascript
// 在当前页面跳转到 /target 页面,并携带参数 id=123
router.push({ path: '/target', query: { id: 123 }})
```
在目标页面中,可以通过 `$route.query` 获取传递的参数。例如:
```javascript
// 获取参数 id 的值
const id = $route.query.id
```
阅读全文