vue导航栏刷新返回刷新前页面

vue导航栏刷新返回刷新前页面

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人

---

---

vue导航栏刷新返回刷新前页面:在点击导航栏时获取到当前导航栏的索引,然后使用localStroage存储
只要不关闭页面或者浏览器,这个索引的值会一直存在localStroage里面,操作如下

<template>
    <div class="sidebar">
      <!-- 侧边栏 -->
      <div class="title">故心v管理</div>
      <ul>
        <li  :class="n==i?'sidebar-list':''" v-for="(v,i) in lists" :key="i" @click="keepI(i)">
          <router-link :to="v.url">
            <i class="iconfont" :class="v.icon"></i>
            <span>{{v.name}}</span>
          </router-link>
        </li>
      </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      n:0, //显示当前索引的导航栏..
      lists: [
        { name: "首页", icon: "iconshouye1", url: "/home" },
        { name: "企业管理", icon: "iconqiye", url: "/qiye" },
        { name: "财务管理", icon: "iconcaiwu", url: "/caiwu" },
        { name: "产品管理", icon: "iconchanpin", url: "/chanpin" },
        { name: "订单管理", icon: "iconorder-copy", url: "/order" },
        { name: "管理会员", icon: "iconhuiyuan", url: "/huiyuan" },
        { name: "数据概括", icon: "iconshuju", url: "/shuju" }
      ]
    };
  },
   mounted(){
  //在元素挂载完毕后把当前点击的i赋给n(为防止初次进来的时候本地存储的值为null,故给初始值为0)
  this.n == localStorage.getItem('index') ? localStorage.getItem('index') : 0;
  },
  methods:{
    keepI(i){
      this.n = i;
      //把当前点击的i存到 localStorage中,只有当页面或者浏览器关闭时才会发生变化 刷新保留刷新前的数据
      localStorage.setItem('index',i);
      
    }
  },
};

</script>