Vue 中路由跳转与新窗口打开的方法（query 和 params）
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文将详细介绍在Vue项目中实现页面间的路由跳转及如何在新窗口中打开链接，并探讨使用query和params传递参数的不同方法。
在Vue项目中，路由跳转是实现页面切换的重要功能之一。为了实现在不同的页面间传递数据的需求，通常会采用两种方式：query方式与params方式。接下来我们将详细介绍这两种方法。
### Query 方式
使用Query方式进行参数传递时，会在URL的查询字符串部分添加需要传输的数据，并且这些信息将在浏览器地址栏中显示出来，类似于标准HTTP GET请求中的行为。
- **在路由跳转中应用Query**:
使用`this.$router.push()`函数进行页面切换的时候，可以通过指定query属性来携带参数。这里的query是一个对象形式的键值对集合，它们将作为URL查询字符串的一部分被添加进去。
```javascript
示例代码：
this.$router.push({
path: a,
query: {
projectDetails: val //val为需要传递的具体数据
}
});
```
- **获取Query参数**:
在目标组件中，可以通过访问`this.$route.query`对象来读取这些通过query方式传入的参数。例如，在组件生命周期钩子函数mounted()内进行如下操作：
```javascript
mounted(){
const projectDetails = this.$route.query.projectDetails;
// 对获取到的数据执行进一步处理逻辑
}
```
### Params 方式
在使用Params方式进行路由跳转时，首先需要在定义的路径中指定哪些参数是动态变化的（通过`:`符号来标记）。
- **配置带有Params的路由**:
在项目的router/index.js文件内设置相关路由，并标明哪些字段作为params参数。
```javascript
const routes = [
{
path: /a/:id, // 使用“：”定义变量名，表示此处为动态变化的部分
component: AComponent,
}
];
```
- **通过Params执行路由跳转**:
当要使用一个具体的值填充到上述定义的参数位置时，则可以通过`this.$router.push()`方法并指定name和params对象来完成。
```javascript
示例代码：
this.$router.push({
name: a, // 使用事先设置好的路由名称代替路径字符串
params: {
id: val, // 确保这里的“id”与定义中的参数名一致
}
});
```
- **读取Params传递的数据**:
在目标组件内，同样可以通过`this.$route.params`来访问到那些通过params方式传入的值。
```javascript
mounted() {
const id = this.$route.params.id;
// 对获取的信息执行相应的业务逻辑处理
}
```
### 新开页面的路由跳转
如果需要在一个新的浏览器标签页中打开链接，可以使用`window.open()`结合Vue Router中的`this.$router.resolve()`方法来实现。通过调用这个resolve函数可以获得完整的URL地址，并利用它在新窗口里打开目标网页。
- **配置新开页面的路由**:
使用上述提到的方法获取到需要跳转的目标URL后，可以通过以下方式创建新的浏览器标签页并加载该链接。
```javascript
示例代码：
const { href } = this.$router.resolve({
path: a,
query: {
code: 123,
}
});
window.open(href, _blank);
```
### 注意事项
- **Params传递参数的限制**:
使用params方式在新开窗口中传递数据时，可能会遇到`this.$route.params`为空的情况（即{}）。这是因为动态路径段不会出现在URL里，因此无法直接通过新页面获取。此时建议使用Query方式进行传输或者考虑其他如localStorage、sessionStorage等方法。
- **利用缓存技术传递参数**:
当需要在不显示于URL的情况下把数据传给另一个页面时，可以借助浏览器的本地存储功能（例如`localStorage`或`sessionStorage`）。父组件负责将信息保存进去，在子组件中读取并移除这些临时存放的数据。
总的来说，Vue框架提供了灵活多样的路由跳转及参数传递机制。根据实际开发需求选择合适的方法能够有效提升应用的功能性和用户体验。
全部评论 (0)
