Vue Router 传递参数并解决刷新页面参数丢失问题
本文主要讨论了 Vue Router 传递参数的方式,并解决了刷新页面参数丢失的问题。下面是对该问题的详细分析和解决方案。
一、Vue Router 传参方式
Vue Router 提供了多种传参方式,以下是其中两种:
1. 通过 params 传参
在 Vue Router 中,可以使用 `$router.push` 方法传递参数,例如:
```javascript
this.$router.push({ name: '模块名称', params: { // 各参数 } })
```
在路由配置文件 `router.js` 中,可以使用 `params` 属性来接收参数:
```javascript
export default new Router({
routes: [
{
path: '/paramsPassingByRouter',
component: ParamsPassingByRouter,
children: [
{
path: 'paramsMode',
name: 'paramsMode',
component: ParamsMode
}
]
}
]
})
```
2. 通过 query 传参
除了使用 `params` 之外,还可以使用 `query` 来传递参数,例如:
```javascript
this.$router.push({ name: '模块名称', query: { // 各参数 } })
```
二、解决刷新页面参数丢失问题
在上面的示例代码中,我们使用 `params` 传递参数,但是当刷新页面时,参数会丢失。这是因为 `params` 是通过 URL 传递的,刷新页面时 URL 不变,但是参数会被清空。
为了解决这个问题,我们可以使用 `localStorage` 或者 `sessionStorage` 来存储参数,然后在刷新页面时,从存储中读取参数。
例如,在 `ParamsPassingByRouter.vue` 中,我们可以使用 `localStorage` 来存储参数:
```javascript
export default {
data() {
return {
testData: {
id: '20180101',
name: '张三',
aka: 'z3',
age: '18'
}
}
},
methods: {
paramsMode(data) {
localStorage.setItem('params', JSON.stringify(data))
this.$router.push({
name: 'paramsMode',
params: data
})
}
}
}
```
然后,在 `ParamsMode.vue` 中,我们可以从存储中读取参数:
```javascript
export default {
data() {
return {
testData: {}
}
},
created() {
const params = localStorage.getItem('params')
if (params) {
this.testData = JSON.parse(params)
}
}
}
```
这样,当刷新页面时,我们可以从存储中读取参数,并显示正确的数据。
Vue Router 传递参数可以使用 `params` 或 `query`,但是需要解决刷新页面参数丢失问题,可以使用 `localStorage` 或 `sessionStorage` 来存储参数。