vue路由传参分为俩钟
第一种:query
query: 可以在router-link标签拼接设置/path?参数名=值
例如
<li v-for="(item,key) in list" :key="key">
<router-link :to="'/text?id='+item.id">{{item.title}}</router-link>
</li>
也可以在组建中通过this. r o u t e . p u s h 来 传 递 参 数 , 在 需 要 获 取 值 的 一 个 组 件 用 t h i s . route.push来传递参数,在需要获取值的一个组件用this. route.push来传递参数,在需要获取值的一个组件用this.route.query.id来获取到参数。
例如
var id = this.$route.query.id;
var url = "http://elm.cangdu.org/shopping/restaurant/"+id
this.$axios.get(url).then((res)=>{
console.log(res)
this.obj=res
})
params:可以在router-link标签中拼接设置/path/参数名/=值
例如
<router-link :to="'/text/'+item.id">{{item.title}}</router-link>
也可以在组建中通过this. r o u t e . p u s h 来 传 递 参 数 , 在 需 要 获 取 值 的 一 个 组 件 用 t h i s . route.push来传递参数,在需要获取值的一个组件用this. route.push来传递参数,在需要获取值的一个组件用this.route.params.id来
1.在index.js设置参数
{
path:"/xiang/:id",
name:"Xiang",
component:Xiang
},
2. var id = this.$route.params.id;
var url = "http://elm.cangdu.org/shopping/restaurant/"+id
this.$axios.get(url).then((res)=>{
console.log(res)
this.obj=res
})