第一种:参数携带在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

Logo

前往低代码交流专区

更多推荐