关于路由跳转和传递参数

一、params传参 不显示参数   

编程式

传递：

this.$router.push({
     name:'Home',
     path:'/home',
     params:{
      id:1
     }
   })

接收：

this.$route.params    //传过来的是对象

声明式

传递：

<router-link :to="{name:'Home',params:{id:1}}">跳转到子路由

接收：

this.$route.params.id

二、params传参 显示参数

编程式

配置：

{
    path: '/home/:id',
    component: Home
}

传递：

   this.$router.push({
     path:'/home/${id}',
   })

获取：

this.$route.params.id

声明式

配置：

//配置路由时加上参数就可以
{
    path: '/home/:con',
    component: Home
}

传递：

<router-link :to="/home/'内容'"> 跳转 </router-link>

获取：

this.$route.params    //获取的是一个对象

三、query传参 显示参数

编程式：

传递：

this.$router.push({
    name:'Home',
    path:'/home',
    query:{
      con:1
    }
})

接收：

this.$route.query    //传递过来的是对象

声明式：

传递：

   <router-link :to="{name:'Child',query:{id:1}}">跳转到子路由</router-link>

接收：

 this.$route.query.id