站长图库

Vue多个路由绑定同一组件造成created不执行的解决办法

 发布时间 2019-12-28 14:48:11 热度  69

 Tag标签:  Vue路由绑定组件解决办法
广告
广告
广告
广告
广告
广告

Vue多个路由绑定同一组件造成created不执行的解决办法

具体开发中遇到的需求是:

多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?

这里贴出官方给出的解决办法:

https://router.vuejs.org/zh-cn/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)
    }
},

3种方式都实践过,都可以实现,看个人的爱好和项目情况来定吧。


站长图库

站长素材 - 建站资源分享平台

猜你喜欢
JS禁止F12和鼠标右键代码

JS禁止F12和鼠标右键代码

前端开发 347 2019-03-29

一共两块代码 一个禁止F12和鼠标右键代码 代码可以禁止别人F12和鼠标右键代码 可以防止别人偷去你的代码和你...

TAG:园艺wordpress博客模板

一行代码实现全站pjax无刷新加载

一行代码实现全站pjax无刷新加载

前端开发 697 2019-04-20

一:整合pjax的准备工作检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入1、新...

TAG:园艺wordpress博客模板

微信小程序选择图片和放大预览图片功能

微信小程序选择图片和放大预览图片功能

前端开发 61 2019-12-25

微信小程序选择图片和放大预览图片功能这篇文章主要介绍了微信小程序图片放大预览功能的实现方法,非常不错,具有参考...

TAG:园艺wordpress博客模板

使用PHP+ajax+mysql+layui实现每日签到及提醒功能

使用PHP+ajax+mysql+layui实现每日签到及提醒功能

前端开发 1257 2019-01-13

这篇文章主要为大家详细介绍了使用PHP+layui实现每日签到及提醒功能,具有一定的参考价值,感兴趣的小伙伴们...

TAG:园艺wordpress博客模板