vue3 路由传参 不暴露地址栏
时间: 2024-06-12 17:02:42 浏览: 17
在 Vue 3 中,使用路由传参时,如果你想避免直接在地址栏暴露参数,可以采用以下方法:
1. **使用 Query 参数**:
使用 `router.push` 或 `router.go` 时,你可以传递一个对象作为查询字符串(query params),如:
```javascript
this.$router.push({
path: '/detail',
query: { id: 123 } // 这里的 id 将不会显示在地址栏,只会附加到 URL 查询部分
});
```
然后在路由接收端,使用 `this.$route.query` 访问这些参数。
2. **使用哈希模式(Hash Mode)**:
如果你的应用支持,可以将路由模式设置为 `hash`(`#/detail/123`),这时参数会隐式地存储在 URL 的哈希部分,不会显示在地址栏中。配置如下:
```javascript
router.base = '/'; // 如果不在根路径,记得设置正确的 base
router.mode = 'history' // 假设你已经设置了 History 模式
```
3. **自定义动态路由组件**:
在路由配置里,可以创建一个动态组件,并在组件内部处理参数,这样外部看不到具体的参数值。例如:
```javascript
const routes = [
{
path: '/:id',
component: () => import('./Detail.vue'), // 使用懒加载
props: true,
},
];
```
在 Detail.vue 组件里,可以通过 `props` 接收参数 `id`。