全站资源开放下载,感谢广大网友的支持
链接失效请移步职涯宝平台的学习路线|资源下载分类
支持用户留言评论_客服实时在线_问题解决更快
支付宝赞助-Java帮帮社区
微信赞助-Java帮帮社区

vue监听url参数变化实现跳转当前页面组件复用并实现dom数据刷新解决方案

105
发表时间: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帮帮-微信公众号

将分享做到极致

九点编程-公众号

九点编程-公众号

深夜九点学编程

大数据驿站-微信公众号

大数据驿站-微信公众号

一起在数据中成长

Python帮帮-公众号

Python帮帮-公众号

人工智能,爬虫,学习教程

程序员生活志-公众号

程序员生活志-公众号

互联网,职场,程序员那些事儿

Java帮帮学习群生态

Java帮帮学习群生态

总有一款能帮到你

Java学习群

Java学习群

与大牛一起交流

大数据学习群

大数据学习群

在数据中成长

九点编程学习群

九点编程学习群

深夜九点学编程

python学习群

python学习群

人工智能,爬虫

测试学习群

测试学习群

感受测试的魅力

Java帮帮生态承诺

Java帮帮生态承诺

一直坚守,不负重望

初心
勤俭
诚信
正义
分享
合作品牌 非盈利生态-优质内容分享传播者
友链交换:加帮主QQ2524138991 留言即可 24小时内答复  
会员登录
获取验证码
登录
登录
我的资料
留言
回到顶部