企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] ## 2.1router.js配置,传那些参数 ``` //只传递id { path: '/about/:id', name: 'about', component: ()=>import('@/pages/About.vue') } ``` ## 2.2例如从Home,跳转到Detail ``` //Home.vue <button @click="handleClick">detail</button> methods:{ handleClick(){ this.$router.push('/about/'+10); } } ``` ## 2.3Detail.vue ``` //Detail.vue export default { name:"About", mounted(){ console.log(this.$route.params) } } ``` ## 2.4 子组件向父组件传参 ``` <div class="child" @click="handleClick"> props: { movie: { type: Object } }, handleClick() { //子组件向父组件传参 this.$emit("jump", this.movie.id); //this.movie.id 要向父组件传的值 } ``` ## 2.5 父组件接收值 ``` <movie-item v-for="(item,index) of movies " :key="index" :movie="item" @jump="onjump"></movie-item> ``` > 使用 传过来的值id ``` //直接接收使用 onjump(id){ this.$router.push('/about/'+id); //这是2.2跳转的知识 }, ```