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

怼烎@ 2022-12-24 09:56 133阅读 0赞

# 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 ==''  this.n=0: this.n = localStorage.getItem('index');
      },
      methods:{ 
        keepI(i){ 
          this.n = i;
          //把当前点击的i存到 localStorage中,只有当页面或者浏览器关闭时才会发生变化 刷新保留刷新前的数据
          localStorage.setItem('index',i);
          
        }
      },
    };
    
    </script>