Vue3 中通过
路由传递参数并在
刷新页面时保留这些参数的功能是非常常见的需求。以下是具体的实现步骤以及原理：
### 实现过程
#### 1. 安装并配置 `
vue-router`
首先需要安装
Vue Router 并在项目中初始化它。
```bash
npm install
vue-router@next
```
然后创建
路由器实例，例如在
一个文件 `router/index.js` 中设置如下内容：
```javascript
import { createRouter, createWebHistory } from '
vue-router';
const routes = [
{
path: '/example/:id', // 使用动态路径参数 :id 来接收数据
name: 'Example',
component:
() => import
('@/views/ExampleView.
vue'
)
}
];
export default createRouter
({
history: createWebHistory
(),
routes,
}
);
```
接着将该
路由器挂载到应用上。
#### 2.
路由跳转带参
可以通过多种方式进行
路由传参操作：
**使用 `this.$router.push
()` 进行导航**
```javascript
// 假设当前组件内部调用了这个函数进行跳转，并携带了 id 参数
this.$router.push
({
name: "Example", // 目标
路由名称
params: { id: this.someId }, // 动态参数对象
}
)
```
注意这里的 `params` 只能用于命名
路由(`name`
)的方式；如果是直接指定字符串形式的 URL，则需采用查询字符串的形式传值。
#### 3.
刷新页面后的参数获取
当用户手动
刷新浏览器窗口之后，由于 URL 已经包含了所需的参数信息
(如 `/example/456`
),因此只需要正常解析即可得到之前传递过来的数据。
在目标组件 ExampleView.
vue 的 `<script>` 部分编写以下代码片段读取
路由中的参数:
```javascript
<script setup>
import { onMounted, ref } from '
vue'
import { useRoute } from '
vue-router'
const route = useRoute
()
let paramValue = ref
(''
)
onMounted
(() => {
if
(route.params.id
) {
console.log
(route.params.id
); // 打印出从地址
栏拿到的具体 ID 数值
paramValue.value = route.params.id;
}
}
)
</script>
<template>
<div>{{paramValue}}</div> <!-- 显示接收到的ID -->
</template>
```
上述例子展示了如何利用 Composition API 和响应式变量存储及显示
路由匹配结果中的特定字段。
如果希望支持更多复杂的场景比如加载服务端API资源等可以考虑结合生命周期钩子完成更高级别的功能构建。
---
### 注意事项
- 如果使用的是 query string 格式的参数，在访问的时候应该改用 `route.query.<key>` 形式去拿对应的键名下的数值；
- 对于某些特殊情况下若不想让参数暴露在外则可以选择其他机制像状态管理工具
Vuex 或者 Pinia 存储临时全局共享的状态代替显式地把所有东西都放在URL里边。
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
