解决AngualrJS页面刷新导致异常显示问题

绪  

俗话说，细节决定成败，编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题，殊不知，这些细节正是导致页面显示出现问题的地方。今略举一例，与君共勉之。

页面正常加载后，显示如下：

按F5刷新之后，页面如下所示:

很明显，页面显示出现了异常。回过头再看看Chrome的错误提示，

具体代码如下:

正是以上代码导致了错误的发生。

追根溯源

让我们回顾一下，错误到底是如何发生的。正常加载情况下，页面正常显示很容易理解，程序是按照既定的数据流走的。但是按F5刷新之后，$stateParams.uid已经不存在了，此时再次调用就会出现undefined的错误，导致页面加载出现异常。

如何解决这类问题呢？

首先应在语句执行之前添加变量判断语句，若变量存在且不为空，则可继续执行其它流程。代码如下:

  $scope.pageNumber = 1; // 起始查询页码
  $scope.totalItems = 0; // 查询数据总数
  $scope.pageCnt = 1; // 初始化总页数
  if($stateParams.uid != "" && $stateParams.uid != null && typeof(instance.shopStatementDtl) != "undefined")
  {
  .................
  .................
  }

执行后效果:

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    绪   俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共勉之. 页面正常加载后,显示如下: 按F5刷新之后,页面如下所示: 很明显,页面显示出现了异常.回过头再看看Chrome的错误提示, 具体代码如下: 正是以上代码导致了错误的发生. 追根溯源 让我们回顾一下,错误到底是如何发生的.正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的.但是按F5刷新之后,$stateParams.

  • vuex页面刷新导致数据丢失的解决方案

    解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失.我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方

  • 解决vue页面刷新或者后退参数丢失的问题

    在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代

  • 解决vue页面刷新，数据丢失的问题

    解决vue页面刷新，数据丢失的问题

    在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,出现这个问题的原因是因为当用vuex做全局状态管理的时候,store中的数据是保存在运行内存中的,页面刷新时会重新加载vue实例,store中的数据就会被重新赋值,因此数据就丢失了,解决方式如下: 解决方法一: 最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部,做一个持久化储存,下面是利用localStorage存储的具体方案: 方案一:由于state中的数据是响

  • 解决vue页面刷新vuex中state数据丢失的问题

    解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

  • 解决vue页面刷新产生白屏的问题

    目录 vue页面刷新产生白屏 vue页面白屏的原因及优化 一.原因 二.解决办法 vue页面刷新产生白屏 app.vue <template>   <div id="app">     <router-view v-if="isRouterAlive"></router-view>   </div> </template> <script> export default {   pr

  • Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是本地就显示正常,Tomcat缓存也清楚了,再加上自己也是个小白,周末平静了一天半终于找到问题的源头了,其实解决办法也很简单,如图: 我最初是将小脚本写在<!DOCTYPE html>文档都上方的,但是在IE8浏览文本模式默认就编程了"Quirks"模式,显示不正常,后来改成了写

  • 解决vue+element 键盘回车事件导致页面刷新的问题

    背景 今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent

  • Vue enter回车导致页面刷新问题及解决

    Vue enter回车导致页面刷新问题及解决

    目录 Vue enter回车导致页面刷新 解决方法 Vue按下enter默认刷新页面bug Vue enter回车导致页面刷新 分页中需要 输入页码进行跳转,但是却出现 跳到指定页面后,页面也刷新了.从而无法满足无刷新的分页.最初代码如下: <form class="zh-skip" action="">     <input type="number" v-model="pageNumber" oninpu

随机推荐