vue-router路由传参的三种方法
开发中经常遇到的需求是:多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?官方给出的解决办法:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1
·
开发中经常遇到的需求是:
多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?
官方给出的解决办法:
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
通过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)
}
},
更多推荐
已为社区贡献18条内容
所有评论(0)