Vue多个路由绑定同一组件造成created不执行的解决办法
4496
Vue多个路由绑定同一组件造成created不执行的解决办法。
具体开发中遇到的需求是:
多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?
这里贴出官方给出的解决办法:
通过watch(监测变化) $route 对象,将获取数据的方法写在watch里
后来具体我们尝试了以下几种方法都可实现:
方法一:query传参
router.js(路由配置)
{ path: '/back', redirect: '/back/yjzx', component: viewport, children: [ { path: 'yjzx', name: 'yjzx', component: article } ] }
Vue(其他页面调用)
<router-link :to="{name:'yjzx', query: {type: '1'}}" tag="li"><!--多个router-link的name一样或不一样都可,因为带的参数不一样--> <i class="fa fa-list-ul fa-fw"></i> <span>业界资讯</span> </router-link>
Vue(页面代码)
watch: { '$route' (to, from) { console.log(this.$route.query) } },
方法二:params传参
router.js(路由配置)
{ path: '/back', redirect: '/back/yjzx', component: viewport, children: [ { path: 'yjzx', name: 'yjzx', component: article } ] }
Vue(其他页面调用)
<router-link :to="{name:'yjzx', params: {type: '1'}}" tag="li"><!--多个router-link的name必须不一样,因为参数是以POST方式传递--> <i class="fa fa-list-ul fa-fw"></i> <span>业界资讯</span> </router-link>
Vue(页面代码)
watch: { '$route' (to, from) { console.log(this.$route.params) } },
方法三:通过变量传参
router.js(路由配置)
{ path: '/back', redirect: '/back/yjzx/:type', component: viewport, children: [ { path: 'yjzx/:type', name: 'yjzx', component: article } ] }
Vue(其他页面调用)
<router-link :to="{path:'/back/yjzx/1'}" tag="li"><!--多个router-link的name一样或不一样都可,因为参数不同--> <i class="fa fa-list-ul fa-fw"></i> <span>业界资讯</span> </router-link>
Vue(页面代码)
watch: { '$route' (to, from) { console.log(this.$route.params) } },
3种方式都实践过,都可以实现,看个人的爱好和项目情况来定吧。
本文网址:https://www.zztuku.com/index.php/detail-7723.html
站长图库 - Vue多个路由绑定同一组件造成created不执行的解决办法
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!