路由跳转 query path name params

1 路由跳转

1.1 单纯跳转

//router-link:路由跳转方式
this.$router.push("bookDetail");

1.2 路由跳转带参数

1.2.1 通过path

 this.$router.push({path:"/bookDetail",query:{bookId:id}})

接收

this.bookId = this.$route.query.bookId;

1.2.2 通过name跳转路由

 this.$router.push({name:"bookDetail",query:{bookId:id}})

接收

this.bookId = this.$route.query.bookId;

1.2.3 通过params

this.$router.push({name:"bookDetail",params:{bookId:id}})

接收

this.bookId = this.$route.params.bookId;

params传参，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined

2 $router和$route区别

$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

params相当于POST请求，参数不会在地址栏中显示