最近使用vue,同一个展示界面,只是根据不同的参数去在一个页面显示不同的信息。
试了第一次能触发进去,再点击不同参数相同路由就没反应。后来上网搜了下发现这位大神解决了这个问题。
沾过来只是方便遇到这个问题的人能及时解决这种问题。
/fungleo/article/details/54140095
vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
需求分析
导航上有2个菜单,指向的是同一个列表,但是是不同的状态。我需要根据不同的状态获取状态参数给接口拿到不同的数据。
需求貌似很简单 *0_0*。
本文只针对有一定vue基础的同学有用,如果你是其他框架的同学请忽略。如果想学习vue但不是很熟悉的同学,可以参看我的vue相关博客Vue2+VueRouter2+webpack 构建项目实战
为说明核心问题,只放出核心代码。其他代码请自行脑补。
执行方案1
通过问号传参解决方案
菜单配置
路由配置
{path: 'list', component: list}
11
页面代码
created () {console.log(this.$route.query.status)}
123123
执行结果
如上,我希望得到结果是,点击不同的菜单,得到不同的状态值,然后我就可以拿这个值去向接口请求信息了。结果是,只有从其他页面来这边的时候,才会出现一次,但是,在这两个页面之间进行切换的时候,毛都没有。。。。
装模作样总结原因
路由没有发生变化,因此,只有在第一次进入的时候会因为created
执行。在这两个页面之间进行切换,是不会触发这个执行的。
好,貌似找到原因,进行修改。
执行方案2
通过配置不同的路由进行获取传参
菜单配置
路由配置
{path: '/list',component: frame,children: [{path: 'doing', component: list},{path: 'finish', component: list}]}
1234567812345678
页面代码
created () {console.log(this.getStatus(this.$route.path))},methods: {getStatus (urlStr) {var urlStrArr = urlStr.split('/')return urlStrArr[urlStrArr.length - 1]}}
123456789123456789
执行结果
代码看上去健壮了很多嘛,执行以下看看。。。。
干他大娘的,和第一个执行结果一毛一样啊!!!只有第一次打开的时候,才会执行,在两个之间切换,啥都没发生。。。。
装模作样总结原因
虽然路由地址变化了,但是还是只想的是同一个组件,而created
是创建组件的时候执行,这个钩子根本就不适用啊。。。
翻查vue-router
官方文档,始终找不到一个合适的钩子来执行代码。咋整??
一页一页的翻看官方文档,终于找到了解决方法,参看响应路由参数的变化
最终解决方案
其他设置和方案2一样,页面代码如下:
页面代码
created () {console.log(this.getStatus(this.$route.path))},methods: {getStatus (urlStr) {var urlStrArr = urlStr.split('/')return urlStrArr[urlStrArr.length - 1]}},watch: {'$route' (to, from) {
//刷新参数放到这里里面去触发就可以刷新相同界面了this.getStatus(this.$route.path)}}
如果觉得《vue-router同一路由地址同页面切换无效解决》对你有帮助,请点赞、收藏,并留下你的观点哦!