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刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结