vuevue v for 遍历map时拿到了id值,该怎么通过路由传递

来源：蜘蛛抓取(WebSpider) 时间：2018-04-13 02:49 标签： vue 遍历数组对象
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
路由main.js
name:'hotel',
path:'/hotel/:id',
component:Hotel
list.vue页面
&router-link :to="{path:'/hotel/'+item.id}"&是这样子的，我想把item.id传给hotel.vue页面，。点击url会跳转到http://localhost:8080/#/hotel/1
我在hotel.vue页面中
mounted(){
console.log(this.$vm.$route.params) //
//我想在这里得到参数,会报下面这个错误
//$route is not defined
得不到参数?怎么做
如果改成下面&router-link :to="{path:'/hotel',params:{id:item.id}}"&这样,http://localhost:8080/#/hotel不知道为什么连后缀都没了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&router-link :to="{path:'/hotel',params:{id:item.id}}"&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一、楼主可以在hotel.vue中打印一下this.$route,可以发现你在进行跳转的时候没有手动传递params。可以通过this.$route.path拿到你当前路由的path值，里面包含了你的传递的item的id。
二、楼主如果想通过params的方式在路由之间传递参数，需要在切换路由的时候动态传递params，有以下两种方式：
&router-link :to="{ name: 'user', params: { userId: 123 }}"&User&/router-link&
router.push({ name: 'user', params: { userId: 123 }})
这样的话你就可以在this.$route对象中拿到传递的params值了
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。使用vue-router 来实现webapp的页面跳转，有时候需要传递参数，做法如下：
参考文献：
主要有以下几个步骤：
（1） 设置好路由配置
router.map({
'/history/:deviceId/:dataId': {
name: 'history', // give the route a name
component: { ... }
这里有2个关键点：
a）给该路由命名，也就是上文中的 name: 'history',
b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的 :deviceId, :dataId；
（2）在v-link中传递参数；
&a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}"&history&/a&
这里的123，456都可以改用变量。
比如该template所对应的组件有2个变量定义如下：
data: function() {
deviceId:123,
dataId:456
此时上面那个v-link可以改写为：
&a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}"&history&/a&
（3）在router的目标组件上获取入参
比如在router目标组件的ready函数中可以这么使用。
ready: function(){
console.log('deviceid: ' + this.$route.params.deviceId);
console.log('dataId: ' + this.$route.params.dataId);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持就爱阅读。
欢迎转载：
推荐： 　　　403 Forbidden
Request forbidden by administrative rules.Vue题库_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
&&vue题库汇总
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩3页未读，
定制HR最喜欢的简历
你可能喜欢

我要回帖

更多关于 vue 遍历数组对象 的文章

 

随机推荐