vue使用中转路由替换window.location.reload()实现单页应用页面刷新

作者: Lynan 分类: Vue.js 发布时间: 2018-04-12 11:23

需求

比如说我现在进入到我的SPA的首页,现在首页已经渲染完成,首页上有一个下拉菜单,点击菜单项以后将post一个请求到后端,后端发送cookie给前端,然后下次请求时带上cookie这个首页的内容会完全变化。

传统解决思路:

这个页面的内容时在页面create()时触发获取数据的,那么要重新获得数据的话

  1. 在点击菜单项以后,触发create中的实际上获取数据的方法。
  2. 刷新页面,自然而然地就会重新触发created()

我的想法:

在点击这个切换菜单之后,应该要展示一些过渡动画或者提示,不推荐使用window.location.reload(),因为这样会导致页面闪屏一下。
那么

  1. 使用上面的方法1,同时使用一个toast之类的提示加载过程
  2. 使用中转路由,先调到这个路由页面,然后回到之前的页面,这样也会触发页面重新created()

以下介绍中转路由的实现:

  1. 注册一个中转路由页面,例如路由为
    {
        path: '/loading',
        name: 'loading',
        component: () => import('@/pages/loading')
      },

    ,里面添加加载的动画

  2. 在点击切换菜单的时候,使用
    $router.push('/loading')

    进入中转页面

  3. 在中转页面的created()中设置本页面的持续时间,然后返回之前的页面
    created() {
        let self = this;
        setTimeout(function() {
          self.$router.go(-1)
        }, 750);  //750ms后返回之前的页面。
      }
    

完成,现在切换的时候应该可以看到先进入了这个页面然后返回之前的页面了,和刷新的效果一样,但是不会导致闪屏。

发表评论

电子邮件地址不会被公开。 必填项已用*标注