vue 路由引數變化,頁面不重新整理,provide /inject 完美解決方案
阿新 • • 發佈:2019-02-06
此方法使用的是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
//mainfirem.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,則可以在回撥中獲取更新後的 DOM
this.$nextTick(()=>{
this.isRouterAlive = true
})
}
}
}
</script>
<style scoped lang="stylus"></style>
<route-view>
下顯示的頁面
//newProduct
export default {
name: 'newproduct',
inject:['reload'],
method:{
//點選div的時候,路由引數改變,
//呼叫mainfirem.vue下的this.reload()方法,來改變v-if的狀態
clickDiv(){
this.reload()
}
}
provide /inject 官網地址
這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。
end