引言
相信在大多数人的页面开发中，渲染页面所需的数据都是在created中进行接口调用来获取。然后呢，小编在最近的开发中有这样一个需求，在菜单栏中选择进入该页面时，不论处于任何场景下，都要渲染最初的数据展示。用一句话说呢，就是在当前页面再次跳转进入当前页面，要触发我们的渲染数据的流程。
但是呢，vue-router中的特性是：只有在页面进行更新跳转后，才会重新触发我们的created,mounted生命周期。所以，要实现我们的从/routeA => /routeA，并且触发初始化的接口函数，要怎么做呢？
1.无痕刷新
这种场景，常见的是我们可以刷新一下页面就会触发相应流程。但是刷新页面会有白屏，用户体验不好。所以就尝试做尽量无痕的刷新效果。vue中做无痕刷新，我是通过这篇博客学习的proviede和inject结合的方法。
=>vue 刷新当前页面或者跳转页面时候刷新
在App.vue中
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: "App",
provide() {
return {
reload: this.reload
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
<style>
</style>
在要用到刷新的组件中,
<script>
export default {
inject: ['reload'],
data() {
return {};
},
methods: {
refresh(){
this.reload();
}
},
};
</script>
效果如下：
这种无痕刷新的弊端在于，他只是消除了手动刷新时的白屏，但是还是重新加载了图片等文件。时间较长，体验也并不好。
2.通过router-view和ref，以父子组件通信的方式来调取相关API。
DOM：
<router-view ref="Router_Son" />
JS：
首页：
menu_select(index, indexPath) {
var path = "/portal/" + index;
if (indexPath && indexPath[1] == "hole_query") {
this.$router.push({
path: path
});
this.$store.commit("Hole_ListStatus");
this.$store.commit("Hole_CurrentPage", null);
this.$store.commit("Hole_Back", false);
if (this.$refs.Router_Son.holeList_inital) {
this.$refs.Router_Son.holeList_inital();
}
}
},
漏洞查询：
method:{
holeList_inital(){}
},
created(){
this.holeList_inital();
}
当时的思路是：我需要的是在我点击菜单中的漏洞查询时，改变vuex存储的数据，然后在调用漏洞查询页面的初始化函数，即可达到我需要的功能。而vue的实现方式，就是在我的父组件（写有这些公共菜单，页脚等）中，以路由的方式来调用的漏洞查询这一子组件中的页面。这不就是父子组件通信吗~ emm
然后呢，抛去event bus的通信方式，更优雅一点的就是通过ref来实现this.$refs.Router_Son.holeList_inital();
这里需要注意的一个小细节是：Router_Son相当于子路由中的子组件（我的表述并不专业），在漏洞查询该页面时中点击菜单栏中的漏洞查询进行跳转，此时我们的子组件中包含holeList_inital这个函数。如果在其他页面时点击菜单栏中的漏洞查询进行跳转，此时并不包含该函数。为了减少一些报错，所以需要一个if判断。
效果如下：
3.路由守卫的方式来进行判断
因为小编也是刚毕业，主要是面向百度开发，哈哈。然后当时了解到的是，还有一种思路是通过路由守卫来进行判断。组件内的守卫有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave，但是对于我的这种场景并不适用。=>路由守卫的官方文档
beforeRouteUpdate:官方的描述是这样：
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
针对的是这种场景: /portal/hole_query?id=1 => /portal/hole_query?id=666
但是由于我们是安全行业，以前做的项目中，测试报告比较严格。然后我为了不明显暴露参数，就在项目中统一采用了vuex，
不使用query传参等。所以这种方式我不适用，大家如果有这种情景的话，可以试试路由守卫的方式。
4.尾言
感谢您能看到这里，哈哈。第一次写，不足之处希望大家不吝赐教。 =
