路由传参
1、路由配置传参
2、query传参
3、params传参
1、路由配置传参（刷新页面不会丢失参数,url会携带参数）
A组件跳转B组件传参
A组件
goTopage() {
let id = 123
this.$router.push({
path: `/music/${id}`,
})
},
路由配置
{
id: 1002,
path: '/music/:id',
component: Find,
},
B组件
mounted(){
console.log(':id传参', this.$route.params.id) //123
}
2、query传参（刷新页面不会丢失参数,url会携带参数）
A组件跳转B组件传参
A组件
goTopage() {
this.$router.push({
path: '/find',
query: {
name: '小溪流',
},
})
},
B组件
mounted(){
console.log('query传参的this.$route', this.$route)
onsole.log('query传参', this.$route.query.name) //小溪流
}
image.png
3、params传参（刷新页面丢失参数,url不会携带参数）
解决丢失参数问题可用vuex或localstorage存储参数
A组件跳转B组件传参
A组件
goTopage() {
this.$router.push({
//params传参用的是name
name: '公司新闻',
params: {
name: '小溪流',
},
})
},
B组件
mounted(){
console.log('params传参的this.$route', this.$route)
onsole.log('params传参', this.$route.params.name) //小溪流
}
image.png
//vue-router有两个全局的$router、$route
this.$router.push()
this.$router.go() //location.reload()
this.$router.replace()
