vue实现进入某个页面后替换地址栏路径的操作方法
作者：毛三仙
vue页面在实际开发中,经常会遇到改变url参数,重新加载页面数据的需求,但是只改变页面url并不会触发组件的生命周期,这就需要用其他方法来实现了,本文重点介绍vue实现进入某个页面后替换地址栏路径的操作方法,感兴趣的朋友跟随小编一起看看吧
vue实现进入某个页面后替换地址栏路径
需求背景：a系统进入b系统首页（"/index"）需要携带token，如 example.com/index?token="thisIsMyToken" 需要再b系统中将地址栏携带的token清除
getBtnType(type) {
this.$router.push({
path: "/",
query: {
token: 'thisIsMyToken'
},
})
},b系统中的router/index.js
router.beforeEach((to, from, next) => {
if (to.query.token) {
localStorage.setItem("myToken", to.query.token)
router.replace({ path: "/" }).then((res) => {
next();
})
}
});vue重新加载/刷新当前页面 改变url参数触发页面生命周期
vue页面在实际开发中，经常会遇到改变url参数，重新加载页面数据的需求，但是只改变页面url并不会触发组件的生命周期，这就需要用其他方法来实现了。
一、this.$router.go(0) 和 location.reload()
相当于刷新浏览器，会重新加载页面资源，体验相当差。
二、推荐使用：provide / inject 组合
在index.vue（与页面结构有关）文件，声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。
<template>
<div>
<menu-top></menu-top>
<menu-slide></menu-slide>
<div class="app-content">
<transition name="router-fades" mode="out-in">
<router-view v-if="isRefresh"></router-view>
</transition>
</div>
</div>
</template>
<script>
import MenuTop from "@/components/menu-top.vue";
import MenuSlide from "@/components/menu-slide.vue";
export default {
provide () { //注入重新加载组件方法（子页面可以通过inject属性接收）
return {
reload: this.reload
}
},
components: {
MenuSlide,
MenuTop
},
data () {
return {
isRefresh: true
}
},
methods: {
async reload () {
this.isRefresh= false
await this.$nextTick()
this.isRefresh= true
}
}
}
</script>原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
在需要使用的子页面通过inject属性接收，直接调用this.reload()，只加载当前组件，并且触发组件的生命周期函数，不会刷新整个网站，效果很好
<template>
<div></div>
</template>
<script>
export default {
inject: ['reload'],
methods:{
reloadFun () {
this.reload()
}
}
}
</script>到此这篇关于vue实现进入某个页面后替换地址栏路径的文章就介绍到这了,更多相关vue替换地址栏路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！