此方法使用的是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>