<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="./vue.js"></script>

    <style>

      .div {

        background-color: #ccc;

        height: 100px;

        width: 100px;

        float: left;

        margin-left: 10px;

      }

      .active {

        color: #f91;

      }

    </style>

  </head>

  <body>

    <div id="app" style="overflow: hidden">

      <a

        v-bind:class="[showTab.num == 1 ? 'active div' : 'div']"

        href="http://www.baidu.com"

        v-on:click="changeTab(1)"

      >

        关注

      </a>

      <a

        v-bind:class="[showTab.num == 2 ? 'active div' : 'div']"

        href="http://www.baidu.com"

        v-on:click="changeTab(2)"

      >

        知识点

      </a>

      <a

        v-bind:class="[showTab.num == 0 ? 'active div' : 'div']"

        href="http://www.baidu.com"

        v-on:click="changeTab(0)"

      >

        动态

      </a>

    </div>

    <script>

      const vm = new Vue({

        // element

        // 作用：指定页面中的哪块内容作为Vue的视图

        el: '#app',

        // 数据

        data: {

          showTab: {

            num: 1

          }

        },

        mounted() {

          if (localStorage.getItem('tabNum')) {

            console.log(1)

            this.showTab.num = localStorage.getItem('tabNum')

          }

        },

        methods: {

          changeTab(data) {

            this.$set(this.showTab, 'num', data)

            localStorage.setItem('tabNum', data)

          }

        }

      })

    </script>

  </body>

</html>

vue tab栏缓存解决跳转页面后返回的状态保持的更多相关文章

  1. vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  2. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  3. mui中confirm在苹果出现bug，confirm点击确定跳转页面再返回后，页面被遮罩盖住无法使用

    项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...

  4. 怎么给当前点击的a标签添加一个样式（跳转页面后）

    怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...

  5. Nginx自定义404页面并返回404状态码

    Nginx定义404页面并返回404状态码, WebServer是nginx,直接告诉我应该他们配置了nginx的404错误页面,虽然请求不存在的资源可以成功返回404页面,但返回状态码确是200. ...

  6. vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  7. js通过生成临时表单再删除的方式向后台提交数据（模拟ajax的post提交但还要跳转页面不返回数据）以及 struts向前台返回文件下载及防止中文乱码处理

    为了避免发送数据中有特殊字符,发送时用 encodeURIComponent 编码 (其实这个 if中是直接通过浏览器下载文件的方法,else是向后台传数据的方法) struts后台Action处理接 ...

  8. jq 鼠标点击跳转页面后 改变点击菜单的样式代码

    点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...

  9. history API，判断页面是否是在跳转链接后返回

    https://www.cnblogs.com/accordion/p/5699372.html history.replaceState(history.state, null, "htt ...

随机推荐

  1. Codevs1922 骑士共存问题

    1922 骑士共存问题 题目描述 Description 在一个n*n个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入. 对于给定的n*n个方格的国 ...

  2. Leetcode47. Permutations II全排列2

    给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 在全排列1题目的基础上先排序,目的是把相同的 ...

  3. Python判断文件和文件夹是否存在的方法

    Python判断文件和文件夹是否存在的方法 这篇文章主要介绍了Python判断文件和文件夹是否存在的方法,本文还讲解了判断是否为文件或者目录的方法.os.path.lexist的作用.FTP中判断文件 ...

  4. python安装第三方模块

    1.pip 安装命令: pip install 模块名由于国外网站不稳定可能会出现超时的情况,我们可以自己指定下载源命令如下临时修改 pip install 模块名 -i https://pypi.t ...

  5. AutoDesk产品，Maya 2018 安装，Microsoft Visual C++ 2012 安装失败，结果 = -2147024546，安装Microsoft Visual C++ 2012 Redistributable 错误0x80070005 等等

    今日老弟装Maya 2018出现问题,我帮忙解决了一下问题,过程颇为曲折,记录一下,看能否帮到有类似困惑的朋友. 我和老弟的电脑牌子一样,就现在自己电脑上装了,竟然开始和他的错误是一样的!都是Micr ...

  6. Sass ＠at-root （1）

    在SassConf大会上,给我们传递了Sass3.3的新特性.这些新特性有很多意义,特别是@at-root指令,这让你的代码会得更佳清洁. 今天我们主要一起来了解Sass中的@at-root特性的使用 ...

  7. 详细介绍Java中的堆、栈和常量池

    下面主要介绍JAVA中的堆.栈和常量池: 1.寄存器 最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈 存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在 ...

  8. jQuery ajax请求struts action实现异步刷新

    第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因为为了做测试,两种jar包的转换方式都用到了. 第 ...

  9. js树状菜单

    html部分 <ul class="tree"> <li><span><a href="#">JavaScrip ...

  10. SDUT-3363_驴友计划

    数据结构实验之图论七:驴友计划 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 做为一个资深驴友,小新有一张珍藏的自驾游 ...