vue返回上一页保留数据
在 Vue 中返回上一页并保留数据,可以通过以下几种方法实现:
1. 使用 Vue Router 的 history 模式:
Vue Router 是 Vue.js 的官方路由插件,可以实现页面之间的跳转和历史记录的管理。在使用 history 模式时,URL 地址不会显示 "#" 符号,并且可以利用浏览器的 "后退" 和 "前进" 功能。
在使用 Vue Router history 模式时,可以通过 `router.go(-1)` 方法返回上一页,并使用路由传参的方式携带数据到上一页,示例代码如下:
```javascript
// 上一页
{{ data }}
export default {
data() {
return {
data: '保留的数据'
}
}
methods: {
goBack() {
this.$router.go(-1) // 返回上一页
}
}
}
```
在上述示例代码中,点击 "返回上一页" 按钮会调用 `goBack` 方法,通过 `this.$router.go(-1)` 返回上一页。
2. 使用浏览器的 `window.history` 对象:
可以直接使用浏览器的 `window.history` 对象的 `back` 方法返回上一页,并且可以在 URL 后面拼接参数传递数据,示例代码如下:
```javascript
// 上一页
{{ data }}
export default {
data() {
return {
data: '保留的数据'
}
}
methods: {
goBack() {
const data = this.data
const encodedData = encodeURIComponent(data)
window.history.back(encodedData) // 返回上一页并携带数据
}
}
}
```
在上述示例代码中,点击 "返回上一页" 按钮会调用 `goBack` 方法,通过 `window.history.back(encodedData)` 返回上一页并携带数据。
3. 使用 Vuex 存储数据:
Vuex 是 Vue.js 的状态管理库,可以在全局共享数据,实现不同页面之间的数据传递。通过将数据存储在 Vuex 的 state 中,在返回上一页时可以直接访问数据,示例代码如下:
```javascript
// 页面 A
{{ data }}
export default {
data() {
return {
data: '要保留的数据'
}
}
methods: {
goToNextPage() {
this.$store.state.data = this.data // 存储数据到 Vuex state
this.$router.push('/pageB') // 跳转到下一页
}
}
}
// 页面 B
{{ $store.state.data }}
export default {
methods: {
goBack() {
this.$router.go(-1) // 返回上一页
}
}
}
```
在上述示例代码中,点击 "跳转到下一页" 按钮会将数据存储到 Vuex state,然后通过 `$router.push('/pageB')` 跳转到页面 B,然后在页面 B 中使用 `$store.state.data` 获取存储的数据。点击 "返回上一页" 按钮会调用 `goBack` 方法,通过 `this.$router.go(-1)` 返回到页面 A。
这是三种在 Vue 中返回上一页并保留数据的方法,你可以根据实际需求选择适合的方法使用。