vue tab栏缓存解决跳转页面后返回的状态保持
<!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栏缓存解决跳转页面后返回的状态保持的更多相关文章
- vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。
使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- mui中confirm在苹果出现bug，confirm点击确定跳转页面再返回后，页面被遮罩盖住无法使用
项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...
- 怎么给当前点击的a标签添加一个样式（跳转页面后）
怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...
- Nginx自定义404页面并返回404状态码
Nginx定义404页面并返回404状态码, WebServer是nginx,直接告诉我应该他们配置了nginx的404错误页面,虽然请求不存在的资源可以成功返回404页面,但返回状态码确是200. ...
- vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...
- js通过生成临时表单再删除的方式向后台提交数据（模拟ajax的post提交但还要跳转页面不返回数据）以及 struts向前台返回文件下载及防止中文乱码处理
为了避免发送数据中有特殊字符,发送时用 encodeURIComponent 编码 (其实这个 if中是直接通过浏览器下载文件的方法,else是向后台传数据的方法) struts后台Action处理接 ...
- jq 鼠标点击跳转页面后 改变点击菜单的样式代码
点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
- history API，判断页面是否是在跳转链接后返回
https://www.cnblogs.com/accordion/p/5699372.html history.replaceState(history.state, null, "htt ...
随机推荐
- Leetcode617.Merge Two Binary Trees合并二叉树
给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 ...
- ML面试1000题系列（51-60）
本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 51.简单说下sigmoid激活函数 常用的非线 ...
- Lavavel 程序报错 MassAssignmentException in Model.php line 452: _token
Lavarel 用类似于下面命令插入数据时候出错 Comment::create($request->all()) 错误页面截图如下: 错误原因:下面这行代码应该写到对应的Model里面,而不是 ...
- jmeter 通过csv data set config 设置参数化后，执行结果显示为<EOF>
通过csv data set config 设置参数化后,执行结果显示为<EOF>: 反复确认相应的参数的设置均没有问题,其中csv文件编码方式采用uft-8.在csv data set ...
- Codeforces Round #197 (Div. 2) A. Helpful Maths【字符串/给一个连加计算式，只包含数字 1、2、3，要求重新排序，使得连加的数字从小到大】
A. Helpful Maths time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 阿里工程师开发了一款免费工具，提升Kubernetes应用开发效率
对于使用了Kubernetes作为应用运行环境的开发者而言,在同一个集群中我们可以使用命名空间(Namespace)快速创建多套隔离环境,在相同命名空间下,服务间使用Service的内部DNS域名进行 ...
- JavaCollection
http://blog.csdn.net/itlwc/article/details/10148321 http://blog.sina.com.cn/s/blog_6d6f5d7d0100s9nu. ...
- Nginx教程(二) Nginx虚拟主机配置 （转）
Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...
- sping,springMVC @Component 注解的对象都是单例模式，变量不能全局
错误方式: 将属性和变量定义为全局,单例模式,所有人共享,导致所有人的数据都发生错误! 正确方式 一: 将变量定义到局部,互不影响. 正确方式 二: 假如必须放到全局所有方法 ...
- Directx11教程(35) 纹理映射(5)
原文:Directx11教程(35) 纹理映射(5) 到现在为止,我们的TextureClass初始化函数非常简单,说白了就是一行代码: result = D3DX11CreateShader ...