1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.     <script src="./vue.js"></script>
  9.     <style>
  10.       .div {
  11.         background-color: #ccc;
  12.         height: 100px;
  13.         width: 100px;
  14.         float: left;
  15.         margin-left: 10px;
  16.       }
  17.       .active {
  18.         color: #f91;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div id="app" style="overflow: hidden">
  24.       <a
  25.         v-bind:class="[showTab.num == 1 ? 'active div' : 'div']"
  26.         href="http://www.baidu.com"
  27.         v-on:click="changeTab(1)"
  28.       >
  29.         关注
  30.       </a>
  31.       <a
  32.         v-bind:class="[showTab.num == 2 ? 'active div' : 'div']"
  33.         href="http://www.baidu.com"
  34.         v-on:click="changeTab(2)"
  35.       >
  36.         知识点
  37.       </a>
  38.       <a
  39.         v-bind:class="[showTab.num == 0 ? 'active div' : 'div']"
  40.         href="http://www.baidu.com"
  41.         v-on:click="changeTab(0)"
  42.       >
  43.         动态
  44.       </a>
  45.     </div>
  46.     <script>
  47.       const vm = new Vue({
  48.         // element
  49.         // 作用：指定页面中的哪块内容作为Vue的视图
  50.         el: '#app',
  51.         // 数据
  52.         data: {
  53.           showTab: {
  54.             num: 1
  55.           }
  56.         },
  57.         mounted() {
  58.           if (localStorage.getItem('tabNum')) {
  59.             console.log(1)
  60.             this.showTab.num = localStorage.getItem('tabNum')
  61.           }
  62.         },
  63.         methods: {
  64.           changeTab(data) {
  65.             this.$set(this.showTab, 'num', data)
  66.             localStorage.setItem('tabNum', data)
  67.           }
  68.         }
  69.       })
  70.     </script>
  71.   </body>
  72. </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. Leetcode56. Merge Intervals合并区间

    给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [1,3] ...

  2. php中 重载的方法

    php中 重载(一)这个文章,谢谢.作为初学者,大牛勿喷: 基本是两个方法 __call,当调用对一个不可访问的对象方法时,会自动执行该魔术方法!(对象调用) 典型的两种处理方式: 1,给出友好的提示 ...

  3. Thinkphp 不足之处

    1.报错机制 //控制器里面直接输出如下内容,代码不提示.TP报错机制已经开启 echo $aaaaaa; bbbbbbbbb; eco bbbbbbbb; 正常应该给出以下提示 Notice: Un ...

  4. GCC/GDB学习

    GCC学习 1.gcc是根据后缀名来区分文件的 .c : c语言源文件 .a : 目标文件构成的库文件 .C/.cc/.cxx : c++源文件 .h : 头文件 .i : 预处理过的C源文件 .ii ...

  5. Vim 中自定义注释快捷键

    写程序的时候写过的代码不忍心立马删掉,所以注释很多,所以找了下注释的快捷健. 打开 /etc/vim/vimrc文件,添加如下两行代码即可. /* 注释该行 */ map = I/* ^[A */j ...

  6. 【51nod1563】坐标轴上的最大团 贪心

    题面 坐标轴上有n个点,每个点有一个权值.第i个点的坐标是 xi ,权值是 wi .现在对这些点建图.对于点对 (i,j) ,如果 \(|xi−xj|≥wi+wj\) ,那么就给第i个点和第j个点之间 ...

  7. 学习笔记（2）---Matlab 图像处理相关函数命令大全

    Matlab 图像处理相关函数命令大全 一.通用函数: colorbar  显示彩色条 语法:colorbar \ colorbar('vert') \ colorbar('horiz') \ col ...

  8. iOS Status Bar变换

    http://www.cocoachina.com/ios/20160718/17020.html 背景 iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求.而改变状态栏颜色和 ...

  9. NOIP模拟 7.03

    Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来． 他们都站在数轴上．约翰在N(O≤N≤1 ...

  10. php表单和缩略图处理类是什么样呢

    <?php//封装一个表单验证类//中文验证.邮箱验证.电话号码.手机.QQ.身份证.(由字母.数字.下划线组成,不能以数字开头)header('content-type:text/html;c ...