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

Question

这是刷新之前的状态

这是刷新之后的

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

Answer 1

<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>

Answer 2

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

Answer 3

我以前写的一个

// 刷新时自动显示当前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');
        }
    });
}

Answer 4

把状态用vuex记录下？

Answer 5

最优雅的方式

1. 使用vuex记录状态

2. 将vuex store储存到localStorage

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

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

Answer 6

请问这个有解决吗