在vue中二级页面返回一级页面

场景：在vue后台管理端项目，需要实现从列表页面跳到详情页面，再从详情页面返回到列表时，列表页面保持跳转之前的状态。

方案一：keep-alive

实践证明，效果是实现了，但是带来了其他问题，会将其他页面的状态都缓存住，而我们只是想要缓存一级列表页面的。所以这方案 pass。

方案二：mixins和vuex

想法是写一个全局的方法，通过 mixins 混入，在需要的页面引进来，这样的话，就可以灵活实现该场景。当然，这里会把列表页面状态存到 vuex 里，在mixins中去调用缓存的状态。
具体实现：

// query.js
export default{watch: {// 深度监听对象里的每个值的变化'searchParam': {  // 列表页面需要缓存的对象handler() {// 缓存搜索条件及当前路由的namethis.$store.commit('CACHE_QUERY', this.searchParam)// 缓存当前页面路由名称this.$store.commit('CACHE_ROUTE_NAME', this.$route.name)},deep: true}},created() {this.tableParam.total = null},mounted() {this.parseQuery()},methods: {parseQuery() {// 存一份初始值，当路由名称不一样时，刷新页面if (this.$store.state.app.currentRouteName !== this.$route.name) {// this.searchParam = Object.assign({}, resetData)this.$store.commit('CACHE_TAB_INDEX', 'my')} else {// 将缓存在 vuex 中的搜索条件，和当前的搜索条件合在一起let query = Object.assign({}, this.$store.state.app.searchQuery)this.searchParam = {...this.searchParam, ...query}}// 如果使用了 el-tabs，那在这里先获取存在 vuex 里的 activeName 值，并改变选中项this.$parent.$parent.$parent.activeName = this.$parent.$parent.$parent.activeName && this.$store.state.app.currentTabIndex}}
}

需要注意的是这里的 searchParam 在每个列表页面都有，也就是说每个列表页面需要设置一个对应的 searchParam，它代表每个页面的搜索条件。
再在需要使用的列表页面去使用：

import queryList from '@/commons/mixins/query'export default {mixins: [queryList]
}

这样的话就达到了我们需要的效果，从二级返回到一级页面，一级页面保持跳转之前的状态。
如果页面有重置按钮，那么在重置的方法里也要加上 this.tableParam.total = null

公众号：Coder 杂谈，欢迎关注

在vue中二级页面返回一级页面相关推荐

vue中处理后台返回的 html 特殊标签(‘\lt； p style=“xxx“ \gt；‘)或(\＜p＞)的三种情况及传给后端数据的解决方案
问题一:vue中处理后台返回的 html 特殊标签('&lt: p style="xxx" &gt:')或(\<p>)的三种情况返回数据 // 返回数 ...
javascript 跳转页面关闭当前页面返回上页面
//跳转页面 1.window.location.href //跳转到的页面 2.如何有form 表单的话 document.form[0].action = //跳转的action ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
ios 销毁当前页面重新开启_利用Vue中keep-alive，快速实现页面缓存
keep-alive 有时候我们不希望组件被重新渲染影响使用体验:或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就可以用到keep-alive组件. 官网 ...
react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
（uniapp跳转回显）,A页面进入B页面，B页面返回A页面，并传值给A页面（技巧绝对好用慢慢看）
!这种方法首先要理解uniapp里面的getCurrentPages()函数,自己可以打印一下就知道了 var pages = getCurrentPages();//获取所有页面的数组对象 var ...
时间戳处理：vue中请求接口返回的数据将时间戳转换成时间并渲染到页面
问题: 今天遇到一个问题是,请求接口,返回了很多的时间戳数据.将时间戳转换成时间.并渲染到页面上.之前有篇文章讲的是单个时间戳的转换.这次是多个数据.我有点不知所措了. 分析: 经过思考,我们可以这样 ...
vue从其它页面返回_vue页面按返回键等跳转重定向判断
情景:用户购物车-结算页-支付后跳转到跳转到订单列表,当按返回时重定向到首页 1.使用this.$router.replace() 2. mounted() { // 挂载完成后,判断浏览器是否支持p ...
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...

在vue中二级页面返回一级页面

方案一：keep-alive

方案二：mixins和vuex

在vue中二级页面返回一级页面相关推荐

最新文章

热门文章