vue 路由参数变化，页面不刷新，provide /inject 完美解决方案

此方法使用的是v-if来控制router-view的显示或隐藏，v-if从false变为true时，vue会重新渲染router-view区域，所以当参数变化时，只需让v-if 从true => false => false,就能实现页面刷新;
问题描述
官网地址

路由
http://localhost:1221/newproduct?entityId=7B311104
点击div时，变为
http://localhost:1221/newproduct
页面不刷新
怎么办……

温馨提示,此方法适用vue 2.20+版本,请先查看你的vue版本
首先，找到自己的route-view

app.vue

<template><div class="os_container"><navbar></navbar><router-view v-if="isRouterAlive"></router-view></div>
</template><script>
import navbar from '@/components/navbar'
export default {name:'mainframe',provide(){return {reload:this.reload}},data () {return {isRouterAlive:true,}},components:{navbar,},methods:{reload(){this.isRouterAlive = false//在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOMthis.$nextTick(()=>{this.isRouterAlive = true})}}
}
</script>
<style scoped lang="stylus">
</style>

<route-view>下显示的页面

切换语言的页面里

export default {name: 'newproduct',inject:['reload'],  //  // 接受App那边提供的方法method:{//点击div的时候，路由参数改变，//调用mainfirem.vue下的this.reload()方法，来改变v-if的状态clickDiv(){this.reload()}}

可用在多语言的切换页面

<template><div><Dropdown trigger="click" @on-click="selectLang"><a href="javascript:void(0)">{{ title }}<Icon :size="18" type="md-arrow-dropdown" /></a><DropdownMenu slot="list"><DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem></DropdownMenu></Dropdown></div>
</template><script>
export default {name: 'Language',inject: ['reload'], // 接受App那边提供的方法props: {lang: String},data () {return {langList: {'zh-CN': '语言','zh-TW': '語言','en-US': 'Lang','ja-JP': '言語'},localList: {'zh-CN': '中文简体','zh-TW': '中文繁体','en-US': 'English','ja-JP': '日语'}}},watch: {lang (lang) {this.$i18n.locale = langthis.reload() // 在触发切换语言后调用，相当于直接调用app里写的reload方法}},computed: {title () {return this.langList[this.lang]}},methods: {selectLang (name) {this.$emit('on-lang-change', name)}}
}
</script>

vue 路由参数变化，页面不刷新，provide /inject 完美解决方案相关推荐

vue 路由跳转页面不刷新
vue 路由跳转页面不刷新点击打开视频讲解地址在router-view 里边添加 :key="$route.fullPath" <!-- 添加:key="$ro ...
vue 路由参数变化，页面不刷新（数据不更新）解决方法
路由参数改变,页面数据不更新解决方法: http://localhost:8080/#test?id=1 http://localhost:8080/#test?id=2,参数切换后,数据未更新以下 ...
Vue路由跳转页面并刷新页面
watch监测到路由发生跳转时刷新一次页面 watch: {$route() {location.reload();},},
VUE路由跳转后自动刷新一次页面
VUE路由跳转后自动刷新一次页面我们在前端开发时有时会遇到一些问题,暂时找不到解决办法只有靠刷新才能救一下.可是又不能每次都手动刷新.在网上找了很久的自动刷新办法,发现大部分都是路由跳转类的刷新,和 ...
vue路由参数改变，组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发 ...
Ant Design Pro路由参数改变页面没有重新渲染问题的解决
文章目录发现问题解决问题发现问题同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果,测试发现页面在第一次渲染时没有问题,改变参数重新渲染则不刷新,如下所 ...
vue之组件传值爷到孙 provide inject
目录 vue之组件传值爷到孙 provide && inject 使用 provide提供依赖,单个数据,数组形式接受根组件Main.vue 子组件 B.vue BSon.vue ...
【Vue】组件复用导致的路由切换时页面不刷新问题
页面逻辑通过router-link,携带不同params参数,导航向同一个组件. 出现问题1 不同路由切换时组件上的页面不刷新. 问题原因1 mounted() {this.getData();}, ...
vue路由跳转后，刷新指定页面。
做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方 ...

vue 路由参数变化，页面不刷新，provide /inject 完美解决方案

vue 路由参数变化，页面不刷新，provide /inject 完美解决方案相关推荐

最新文章

热门文章