Vue点击跳转到指定组件页面并传参
【代码】Vue点击跳转到指定组件页面并传参。
·
第一种:参数携带在URL后面
上级页面:
<div @click="goContent()">去内容页</div>
goContent(){ this.$router.push({ path: '/content', query:{ id:'123' } }) },
接收页面:
let ID = this.$route.query.id console.log(ID)
第二种方法:组件之间的传参
上级页面:
<ul> <li v-for="item in newsList" :key="item.id"> <router-link :to="'/content/'+item.id">{{item.title}}</router-link> </li> </ul>
接收页面:
<div>我是第二种接收id的方法:{{id_2 }}</div>
data(){ return{ id_2:this.$route.params.id, } },
第三种:
上级页面
<router-link :to="{name:'classifyChild',params:{id:item.id}}"> <button>跳转</button> </router-link>
接收页面:
//对应于方式一 let id=this.$route.params.id;
第四种:上级页面 使用 params 形式传参
上级页面:
this.$router.push({ name: “about”, // ⚠️注:这里不能用path路径,只能用name【请对照router.js中的路由规则中的name项】,否则取不到传过去的数据 params: { name: “ming”, age: 18 } });
接收页面:
age:this.$route.params.age, name:this.$route.params.name
更多推荐
已为社区贡献11条内容
所有评论(0)