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