vue开发中界面刷新问题

vue界面设计界面中，经常会遇到页面刷新的问题，刷新会有下面两中情况：
1> 界面处于一级界面，没有从其他界面拿到参数。
2> 界面处于二级界面，即有从其他界面拿到参数。

比如：在一级页面点击了表单的某一行，进入二级界面，显示的有上一个界面上 ‘ 当前查看的信息 ’ 里面，有上一页的数据，那么在这个界面，就需要有上一页界面传来的ID，以便二级页面在刷新等操作的时候，依旧可以正确的拿到页面的数据。
一级界面：

二级界面：
在上面这种情况下，vue自带的refresh.vue中，默认了刷新的函数，如下:

<template>
	<div></div>
</template>
<script>
export default {
  created() {
    if (this.$route.query.name) {
      router.replace({ name: this.$route.query.name })
    } else {
      console.log('refresh fail')
    }
  }
}
</script>

一般配的路由信息为：

{ path: 'info/sch', component: sch, name: 'sch', meta: { hideLeft: false, module: 'Administrative', menu: 'sch' }}

在上述情况下，刷新就会出现下面的界面，即二级页面上没有显示任何的数据了。

刷新有两种操作：
刷新操作1 点击右上角的刷新按钮。
刷新操作2 点击二级页面自定义的刷新，刷新函数：

在页面的刷新触发的函数
refresh() {
  _g.shallowRefresh(this.$route.name)
}

在global.js封装的刷新函数
shallowRefresh(name) {
  router.replace({ path: '/refresh', query: { name: name }})
},

改进

产生上述的根本原因就是，该页面用到了上个页面传来的ID，从而查询对应的table表格的信息，但是在刷新的时候，这个id在row.click传来的this.$route.params.row中的信息没有了，所以没有了对应的数据。
那么就需要在 一级页面 跳到 二级页面 的时候（即row.click函数触发的时候，将页面的id传到params中router.push({ name: 'list', params: { id: row.id }})）
并将二级页面的路由设置为：

{ path: 'info/sch/:id', component: sch, name: 'sch', meta: { hideLeft: false, module: 'Administrative', menu: 'sch' }}

但是此时执行上述的刷新操作1，页面数据显示正常。
但是在执行上述的刷新操作2的时候，页面的路由信息会先显示下图（短暂），然后跳转到默认登陆路由http://localhost:8082/。

原因：默认的刷新函数shallowRefresh()，只取了路由中的name，但是params中传来的id并没有找到，即找不到路由path: 'info/list',，因为此时配置的路由加了id参数，即path: 'info/list/:id'
此时，需要重新设置刷新函数。有以下几种方法：

• 方法一
  在执行刷新操作2的时候。

  在页面的刷新触发的函数
  refresh() {
    _g.refresh(this.$route.name, this.$route.params)
  }
  
  在global.js封装的刷新函数
  refresh(name, params) {
    router.replace({ path: '/refresh', query: { name: name, params: params }})
  }
  

  此时，二级页面数据则会显示正常。

• 方法二
  在$route中，有一个参数是fullPath（见下图），这个路径存储了当前的name+params，所以，在刷新的时候，我们可以将上面的name和params同时传的方式转换成传fullPath，然后进行刷新。
  
  实现方式：

  在页面的刷新触发的函数
  refresh() {
    _g.refreshFullPath(this.$route.fullPath)
  },
  
  在global.js封装的刷新函数
  refreshFullPath(fullPath) {
    router.replace({ path: '/refresh', query: { fullPath: fullPath }})
  }
  

同时，修改vue自带的刷新函数refresh.vue

created() {
   if (this.$route.query.name && this.$route.query.params) {
     router.replace({ name: this.$route.query.name, params: this.$route.query.params })
   } else if (this.$route.query.name) {
     router.replace({ name: this.$route.query.name })
   } else if (this.$route.query.fullPath) {
     router.replace(this.$route.query.fullPath)
     } else {
       console.log('refresh fail')
   }
 }