如何让vue在刷新页面之后保存刷新前的状态?

PainAndLove
  • 358

这是刷新之前的状态
clipboard.png

这是刷新之后的

clipboard.png

请问怎么样才可以让页面的菜单保持刷新之前的状态?

回复
阅读 10.7k
6 个回答

<ul class="collapse navbar-collapse nav nav-pills navbar-nav top-menu">
<li v-for="item in topMenus">

<a @click="toPath(item.note)"
:class="{ 'active': item.note === data.currentPath }">
{{item.name }}
</a>

</li>
</ul>

有个办法,就是点击左边导航栏时加上hash值,刷新后根据hash,JS控制刷新之前的状态

我以前写的一个

// 刷新时自动显示当前tab
var showTab = window.location.hash;
if (showTab.indexOf("#")==0) {
    $(".tab-content").hide();
    $(showTab).show();
    // footer上的链接跟着变成active
    $(".header .tab-nav a").each(function() {
        if ($(this).attr('href') !== showTab) {
            $(this).removeClass('active');
        }
        else{
            $(this).addClass('active');
        }
    });
}

把状态用vuex记录下?

最优雅的方式

  1. 使用vuex记录状态

  2. 将vuex store储存到localStorage

  3. 刷新页面之后读取localStorage初始化vuex store

这样方便维护 代码可读性高 ?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏