vue路由跳转 保存状态
时间: 2023-09-13 13:08:20 浏览: 93
Vue路由跳转时,组件的状态会被重新初始化,如果想要在路由跳转时保存组件的状态,可以使用两种方法:
1. 使用keep-alive组件
keep-alive组件可以缓存组件的状态,当组件被销毁时,keep-alive会缓存组件的状态,下次再次渲染组件时,会直接从缓存中加载组件的状态,而不是重新初始化。
使用方法:
在路由配置中,将要缓存的组件包裹在keep-alive组件中即可。
```javascript
{
path: '/example',
name: 'example',
component: () => import('@/views/example.vue'),
meta: {
keepAlive: true // 开启缓存
}
}
```
在组件中,可以通过activated和deactivated生命周期钩子函数来处理组件被激活和离开缓存时的操作。
```javascript
export default {
activated () {
// 组件被激活时的操作
},
deactivated () {
// 组件离开缓存时的操作
}
}
```
2. 使用Vuex
Vuex是Vue的状态管理工具,可以用来在组件之间共享状态。如果需要在路由跳转时保存组件的状态,可以将组件的状态保存在Vuex的store中,下次再次渲染组件时,从store中读取状态即可。
使用方法:
在Vuex的store中,定义一个变量来保存组件的状态。
```javascript
const store = new Vuex.Store({
state: {
exampleState: {}
},
mutations: {
setExampleState (state, data) {
state.exampleState = data
}
}
})
```
在组件中,可以通过computed属性来读取store中的状态,通过watch属性来监听状态的变化。
```javascript
<template>
<div>{{ exampleState }}</div>
</template>
<script>
export default {
computed: {
exampleState () {
return this.$store.state.exampleState
}
},
watch: {
exampleState (newVal, oldVal) {
// 监听状态变化的操作
}
},
mounted () {
this.$store.commit('setExampleState', {})
}
}
</script>
```
在路由跳转时,可以调用Vuex的mutations来修改store中保存的状态。
```javascript
methods: {
goToExample () {
this.$store.commit('setExampleState', { name: 'example' })
this.$router.push('/example')
}
}
```
阅读全文