vue中组件3种编程式路由跳转传参

路由传参

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()