vue利用router-link 传参 和 获取参数的方式

     本章只谈如何利用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;  一般我们都是用第一种;  所以这里一定要注意;

 

今天先写到这儿吧; 下次再聊点儿其他的;有问题大家随时留言;