此方法使用的是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 完美解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。