注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

vue監聽url參數變化實現跳轉當前頁面組件復用并實現dom數據刷新解決方案

31
發表時間:2018-12-03 16:36
解決思路:
1、子路由組件監聽URL變化
a、created函數中:
created: function () {
var self = this
self.fetchData()
this.$store.state.count = 0 //在中央狀態管理區中添加一個count值來標識是否重新加載,當頁面每次加載完后把count值重新設置為0
},

b、watch函數中:
watch: {
'$route': 'fetchData'
},
c、methods函數中:
methods:{
fetchData () {
console.log('路由發生變化...')
let deptid = typeof (this.$route.query.id) === 'undefined' ? this.$store.state.deptid : this.$route.query.id
let deptName = typeof (this.$route.query.deptName) === 'undefined' ? this.$store.state.deptName : this.$route.query.deptName
let company = typeof (this.$store.state.company) === 'undefined' ? this.$route.params.company : this.$store.state.company
let from = typeof (this.$route.query.from) === 'undefined' ? this.$store.state.from : this.$route.query.from
let count = this.$store.state.count
this.deptName = deptName
this.deptid = deptid
this.company = company
this.$http.post('/dept', {
'pid': deptid,
'deptName': deptName,
'company': company
}).then((data) => {
this.depts = data.depts
this.peoples = data.people
if (from === 'dept' && count === 0) {//請求成功并且count狀態為0的時候才從新加載
this.$store.state.count = 1//發生重新加載的時候要把狀態改為1
this.reload()//調用父組件的刷新路由方法
}
})
},
}
d、引入父組件暴露的方法
export default{
inject: ['toggleDrawer', 'setMenu', 'reload'],//reload為父組件暴露的方法可調用
}
2、父組件寫一個方法控制路由跳轉刷新
a、<router-view v-if="isRouterAlive"></router-view>//v-if綁定一個data值
data () {
return {
title: '',
link: '',
isRouterAlive: true
}
},
b、提供一個方法來改變data值控制router-view展示與隱藏
methods:{
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
},
}
c、將路由刷新方法暴露出去,這樣子組件就可以直接調用reload方法了
export default{
provide () {
return {
toggleDrawer: this.toggleDrawer,
setMenu: this.setMenu,
reload: this.reload
}
},
}
注:頁面路由結構 Manager為父組件 Dept為子組件要進行當前頁面跳轉并刷新數據
{
path: '/Manager',
name: 'manager',
component: Manager,
children: [
{
path: 'managerindex',
name: 'managerindex',
component: ManagerIndex
},
{
path: 'company',
name: 'company',
component: Company
},
{
path: 'dept',
name: 'dept',
component: Dept
}
]
}


支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部