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

简介Vue多个路由绑定同一组件造成created不执行的解决办法。具体开发中遇到的需求是:多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?这里贴出官方给出的解决办法:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html#%E5%

  

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- :to="{name:'yjzx',query:{type:'1'}}"tag="li"><!--多个router- 的name一样或不一样都可,因为带的参数不一样--><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router- >

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- :to="{name:'yjzx',params:{type:'1'}}"tag="li"><!--多个router- 的name必须不一样,因为参数是以POST方式传递--><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router- >

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- :to="{path:'/back/yjzx/1'}"tag="li"><!--多个router- 的name一样或不一样都可,因为参数不同--><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router- >

Vue(页面代码)

watch:{'$route'(to,from){console.log(this.$route.params)}},

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

下载链接:网站源码/小程序源码/网站模板下载

网站技巧

WordPress建站教程,纯代码实现wordpress防止发布文章出现标题重复,自动检测重复标题文章

2024-9-19 19:44:17

网站技巧

帝国CMS封装的ajax加载信息框架代码

2024-9-19 19:44:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧