vue-router路由动态传参query和params

1.query方式传参和接收参数

//路由

{
   path: '/detail',  //这里不需要参入参数
   name: "detail",
   component: () => import('@/views/login/index.vue'
}

使用：
方法1：

点击按钮

方法2：

点击按钮

方法3：

this.$router.push({name:'details',query:{id:123}})

方法4：

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

2.params方式传参和接收参数

//路由

{
   path: '/detail/:id/',    //后面要带参数
   name: "detail",
   component: detail 
 }

使用：
方法1：

点击按钮

方法2：

this.$router.push({name:'details',params:{id:123}})

页面url显示结果是：http://localhost:8081/#/details/123