在 Vue 中实现
页面跳转时保存当前页面信息，通常涉及以下几种方式：
---
## ✅ 实现方式
### 1. 使用 `Vuex`
保存页面状态
Vuex 是 Vue
的状态管理库，非常适合用于在
页面跳转时保存和恢复状态。
#### 示例代码：
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
formData: {}
},
mutations: {
SET_FORM_DATA(state, data) {
state.formData = data
}
},
actions: {
saveFormData({ commit }, data) {
commit('SET_FORM_DATA', data)
}
},
modules: {}
})
```
```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
```vue
<!
-- PageA.vue
-->
<template>
<div>
<input v
-model="form.name" />
<button @click="saveAndGo">
跳转到 B
页面</button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: ''
}
}
},
methods: {
saveAndGo() {
this.$store.dispatch('saveFormData', this.form)
this.$router.push('/pageB')
}
}
}
</script>
```
```vue
<!
-- PageB.vue
-->
<template>
<div>
<p>
保存的名称是：{{ savedName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
savedName: ''
}
},
mounted() {
const formData = this.$store.state.formData
this.savedName = formData.name
}
}
</script>
```
---
### 2. 使用 `localStorage` 或 `sessionStorage`
如果需要持久化
保存（如刷新后仍然
保留），可以使用 `localStorage` 或 `sessionStorage`。
#### 示例代码：
```vue
<!
-- PageA.vue
-->
<template>
<div>
<input v
-model="form.name" />
<button @click="saveAndGo">
跳转到 B
页面</button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: ''
}
}
},
methods: {
saveAndGo() {
localStorage.setItem('savedFormData', JSON.stringify(this.form))
this.$router.push('/pageB')
}
}
}
</script>
```
```vue
<!
-- PageB.vue
-->
<template>
<div>
<p>
保存的名称是：{{ savedName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
savedName: ''
}
},
mounted() {
const saved = localStorage.getItem('savedFormData')
if (saved) {
const formData = JSON.parse(saved)
this.savedName = formData.name
}
}
}
</script>
```
---
### 3. 使用路由参数（适合少量数据）
适用于传递简单参数（如 ID），不适合传递大量表单数据。
#### 示例：
```javascript
//
跳转时传参
this.$router.push({
path: '/pageB',
query: { name: this.form.name }
})
```
```vue
<!
-- PageB.vue
-->
<script>
export default {
mounted() {
const name = this.$route.query.name
console.log('接收到的名字：', name)
}
}
</script>
```
---
## ✅ 总结对比
| 方式 | 适用场景 | 是否持久化 | 是否适合复杂数据 |
|
------|
----------|
------------|
------------------|
| Vuex | 多
页面共享状态 | ❌（刷新丢失） | ✅ |
| localStorage | 持久化
保存数据 | ✅ | ✅ |
| sessionStorage | 会话期间
保存数据 | ❌（关闭
页面丢失） | ✅ |
| 路由参数 | 传递简单参数 | ❌ | ❌ |
---
##
本文介绍了一种在Vue应用中通过路由元信息实现组件缓存的方法。利用<keep-alive>标签配合路由配置中的'meta'字段来区分哪些视图组件需要被缓存，从而提高用户体验和应用性能。
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
