vue利用router-link 传参 和 获取参数的方式
本章只谈如何利用router-link传递query参数.暂时不谈编程导航传参.两者差不多.今天把router-link这种传参和获取参数的形式讲解清楚.希望对大家有帮助. 假如目前我们现在需要做一个项目.路由的设计是这样的: 主页:www.wangyiyinyue.com; 首页负责展示专辑封面;点击进去专辑详情页面; ...
本章只谈如何利用router-link传递query参数.暂时不谈编程导航传参.两者差不多.今天把router-link这种传参和获取参数的形式讲解清楚.希望对大家有帮助.
假如目前我们现在需要做一个项目.路由的设计是这样的:
主页:www.wangyiyinyue.com; 首页负责展示专辑封面;点击进去专辑详情页面;
专辑详情页面路由: www.wangyiyinyue.com/zhuanji?zhuanjiName=liudehua&zhuanjiId=12456;
这个时候大概的流程是这样的: 输入网址 首先进入主页; 用户点击某一张专辑;此时需要携带上参数,也就是上面的zhangjiName和zhuanjiId ;进入到专辑详情页;此时需要获取到对应的参数再发送ajax请求;把专辑详情页面的内容请求回来;
为什么要携带上参数呢? 因为进入到书籍详情后,发送ajax需要请求你主页点的对应的那张专辑;所以需要参数来确定是哪种专辑;
首先说传递参数; 利用router-link传递;
书写方式:
<router-link :to="{path: '详情页', query: {zhuanjiName: item.zhuanjiName, zhuanjiId: item.zhuanjiId}}" 去专辑详情页按钮 </router-link>
我这里写的是 item.zhuanjiName 具体怎么获取;需要看你的数据格式; 然后进入专辑详情后 url会变成这样:
www.wangyiyinyue.com/zhuanji?zhuanjiName=liudehua&zhuanjiId=12456;
那我们在专辑详情页怎么获取url上的数据呢?也就是主页传递来的数据;
通过this.$route.query; 来获取; 在console面板输出;query是一个对象; 格式应该是这样的:
{zhuanjiName:name,zhuanjiId:id}; 这个时候你就可以打点调用参数了;
另外这个地方有一个特别需要的注意的点,看好了:
是this.$route.query 不是 this.$router.query;
就差一个字母 千万不要写错.写错了获取不到参数;他俩不是同一个对象;不过this.$router对象里面也可以获取到我们传递的参数;不过需要在打点调用currentRoute对象才能得到query;为了大家看的清楚点儿;我把图片传上去; 请大家看图
第一个对象是this.$route;第二个对象是this.$router; 所以第一个对象我们可以直接再打点获取到query;而第二个对象需要再打点一层currentRoute; 一般我们都是用第一种; 所以这里一定要注意;
今天先写到这儿吧; 下次再聊点儿其他的;有问题大家随时留言;
更多推荐
所有评论(0)