vue切换路由不会刷新页面就是巨大的优点吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue切换路由不会刷新页面就是巨大的优点吗?相关的知识,希望对你有一定的参考价值。

切换路由不会刷新页面是因为所有页面都已经事先下载到浏览器了,这会给用户比较流畅的用户体验。从这方面来说是优点。不过如果网速较快,传统的Ajax技术一样可以不用刷新页面,所以这个优点说不上“巨大”。Vue最大的优点应该是实现了Web前端开发的MVVM模式(React也一样,不过Vue的模板化方式做得更舒适)。 参考技术A 这是一种单页应用的实现方式,有它的优点,也有缺点。

除了可以使用vue实现外,还可以使用其他框架实现,如react、angular等。

优点:单页应用模拟APP实现无刷新页面跳转,同时前后端分离,可以更大限度地优化前端。

缺点:页面在前端渲染,不利于SEO,同时较复杂的网站维护成本较高,权限复杂的功能实现较困难。
参考技术B 网站维护成本较高,权限复杂的功能实现较困

vue 跳转 同一路由不刷新问题解决

vue跳转同一路径时,路由参数改变,但页面无法更新

问题原因

vue路由切换实际是组件间的切换,引用相同组件的时候,页面就无法更新

解决方案
方案1.watch监听路由参数变化,并重新渲染(谨慎选择)

该可以实现页面重新加载数据效果,但会出现页面单独刷新出错,滚动条没有返回顶部问题,根据业务需要选择此解决方法

方案2. provide和inject结合使用(推荐使用)

实现思路:在app.vue目录下,对<router-view></router-view>进行摧毁和重建(通过变量routerAlive的状态控制),页面会进行重新渲染。

下面是方案2的具体实现:

//app.vue
<template>
  <div id="app">
    <router-view v-if="routerAlive"  />
  </div>
</template>

<script>
export default {
  data(){
    return{
      routerAlive:true
    }
  },
  provide(){
    return {
      routerRefresh: this.routerRefresh
    }
  },
  methods:{
    routerRefresh(){
      this.routerAlive = false;
      this.$nextTick(()=>{
          this.routerAlive = true;
      });
    },
  }

}
</script>


//page.vue
<template>
  <div>
      <div>跳转到当前页,并改变参数,重新渲染</div>
      <button @click="linkToCurPage">跳转</button>
  </div>
</template>

<script>
export default {
  inject:[‘routerRefresh‘],   //在子组件中注入在父组件中创建的属性
  data() {
    return {
      paramsData:this.$route.query.paramsName,//当前页面url所带参数 假设为1
    }
  },

  mounted(){
    //渲染页面数据
    this.getData();
  },
  methods:{
    //页面数据请求
    getData(){
      const that=this;
      //请求参数
      let params={
        params:this.paramsData
      };

      //发送请求...
      
    },

    //跳转页面
    linkToCurPage:function(){
      this.paramsData=2; //更改参数信息
      this.$router.push({
        path:"/page",
        query:{
          paramsName:this.paramsData
        }
      this.routerRefresh();//调用app.vue里面的routerRefresh()方法,完成摧毁和重建过程
    },
  }
};
</script>




以上是关于vue切换路由不会刷新页面就是巨大的优点吗?的主要内容,如果未能解决你的问题,请参考以下文章

vue 中刷新路由几种方法

vue 路由强制刷新页面最简单方法

vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结

vue项目,实现页面局部刷新 非window.location.方式

vue实现选项卡切换路由不刷新

vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题