Vue点击跳转到指定组件页面并传参

第一种：参数携带在URL后面

上级页面：

去内容页

 goContent(){
            this.$router.push({
                path: '/content',
                query:{
                    id:'123'
                }
            })
        },

接收页面：

let ID = this.$route.query.id
console.log(ID)

第二种方法：组件之间的传参

上级页面：

            

                {{item.title}}
            
        

接收页面：

我是第二种接收id的方法：{{id_2 }}

data(){
        return{
            id_2:this.$route.params.id,
        }
    },

第三种： 

上级页面

  跳转

接收页面：

//对应于方式一
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