bootstrap切换tab页局部刷新_Tab切换懒加载 component is

最新推荐文章于 2022-08-24 10:18:11 发布

Oralas

最新推荐文章于 2022-08-24 10:18:11 发布

阅读量957

点赞数

文章标签： bootstrap切换tab页局部刷新

本文链接：https://blog.csdn.net/weixin_30767365/article/details/112107660

版权

本文介绍如何在Bootstrap的Tab组件中实现切换Tab时的局部刷新和懒加载。在页面改版后，遇到点击返回按钮时，回到了错误的Tab页。通过在Vue.js中使用Vuex来存储当前激活的Tab页（activeName），并在路由跳转时保存和恢复该状态，成功解决了问题。

摘要由CSDN通过智能技术生成

=============== 2019.11.05更新 ===========

后期页面改版：

点击添加/编辑时，进行的是路由跳转，产生的问题是就是，在“详情页”点击返回按钮进行this.$route.go(-1)时，回到的还是第一个tab页，而不是“福利通告”页对应的页面

点击添加或者编辑进行页面跳转

跳转之后的页面

思路：

页面路径跳转时，记住当前的activeName,而恰恰控制切换显示的applyTab刚刚好久满足需求，对，去给avtiveName赋值

增加代码：控制当前的activeName 成功搞定！

mounted () {
    console.log('this.$store.state.name:', this.$store.state.name)
    console.log(this.activeName)
    if (this.$store.state.name) { //必须要有这个判断
      this.activeName = this.$store.state.name // 点击Tab切换后
    } else {
      this.activeName = 'first' // 第一次进入页面时
    }