Vue单页面应用保证F5强刷不清空数据的解决方案

问题描述：

　　Vue单页面用按F5强刷，数据就恢复初始了，这怎么破？

解决方案：

store.subscribe((mutation, state) => {
 sessionStorage.setItem('mobileState', JSON.stringify(state));
})
 if (sessionStorage.getItem('mobileState')) {
  state = JSON.parse(sessionStorage.getItem('mobileState'));
 } else {
  state = stateOrg;
 }

ps:下面看下Vue父组件接收不到子组件$emit事件的原因分析

通常有两种情况：

1.事件名称不全是小写。事件名称要求全小写。

2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。

赞 (0)

相关推荐

  • Vue单页面应用保证F5强刷不清空数据的解决方案

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.setItem('mobileState', JSON.stringify(state)); }) if (sessionStorage.getItem('mobileState')) { state = JSON.parse(sessionStorage.getItem('mobileState')); }

  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • vue单页面应用打开新窗口显示跳转页面的实例

    一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

  • 详解在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面 SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么 都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐

  • 关于Vue单页面骨架屏实践记录

    关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给用户一种很自然的过渡,不会造成页面长时间白屏或者闪烁等情况. 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案. 这里主要通过代码为大家展示如何一步步做出这样一个骨架屏: prerender 渲染骨架屏 本组件库骨架屏的实现也是基于预渲染去实现的,有关于预渲染更详细的介绍请参考这篇文章:处理 Vue 单页面 Meta SEO的另一种思路 下面我们主要介绍其实现步骤,首先我们

  • 浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

    浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

    上一篇说了vue单页面解决解决SEO的问题 只是用php预处理了meta标签 但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题 那接下来可以更进一步的预填充内容了 预填充内容 这里依然使用php来实现 首先在php中拉取需要填充的数据,列表或是具体内容 修改拉取数据部分 $urlExp = explode('/',$_SERVER['REQUEST_URI']); if(count($urlExp)>2 && $urlExp[1] == 'article'

  • VUE单页面切换动画代码(全网最好的切换效果)

    我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir

随机推荐