平时我们在详情页的时候往往需要传递参数给详情页，详情页再根据传递过来的参数进行一个请求。那么在vue-cli中如何进行传参呢？首先在vue-cli，我们是通过vue-router来控制页面跳转和传参的，其传参方式无外乎两种：params和query。params相当于post，query相当于get。
1. 路由传参的使用
1.1 query传参
有编程式（以js代码来实现界面跳转）和声明式（router-link）两种写法，但他们本质上没有区别，router-link内部最后也会调用push方法
（1）router-link方式
首先是传参：
先设置router-link name和query，以下三种写法都可：
<router-link :to="{name:'home', query: {id:1}}"> <!-- 推荐,但是要确保router起名才行 -->
<router-link :to="{path:'/home', query: {id:1}}"> <!-- 也可以这么写 -->
<router-link :to="{path:'/home?id=1'}"> <!-- 或者全写path -->
<!-- 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 -->用户点击router-link的时候query传参数，类似get,url后面会显示参数
然后是取参：
js要写this
$route.query.idthis.$route.query.id（2）this.$router.push()方式
首先是传参：
以某个回调函数对一下代码进行触发，两种写法都可
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})然后是取参：
同上
1.2 params传参
（1）router-link方式
首先是传参：
对于params需要写的to对象是name和params:{}。不能使用path，因为一旦写了path就会覆盖params的值。
<router-link :to="{name:'home', params: {id:1}}"> 想要刷新完参数依然存在，得设置动态路由
const routers = [{path: "/home/:id", name: 'about', component:()=>import('../view/home.vue')}]
//或者 path: "/home:id" 然后是取参：
js要写this
$route.params.idthis.$route.params.id（2）this.$router.push()方式
首先是传参：
以某个回调函数对一下代码进行触发。只有一种写法，因为path会覆盖params。
this.$router.push({name:'home',params: {id:'1'}})然后是取参：
同上
其它
this.$router.replace() 和push一样，只是会替换当前路径而不是添加一个新路径
query和params和区别：
- query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
- params相当于POST请求，参数不会在地址栏中显示，刷新会重置。但是设置了动态路由，会在地址栏以动态路由的格式显示（和query格式不一样,是/值），并且刷新也会保留了。
- query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 刷新页面id还在，非重要性的可以这样传, 密码之类还是用params或其它方式
- params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
原理
我们知道history.pushState是不会切换界面的，那么vue是如何利用他来进行跳转的呢？其实在执行push()进行路由跳转时，会执行VueRouter源码内History对象上的push()操作，为的是记录地址，然后会执行transitionTo()函数进行路由跳转，在该函数内首先会执行normalizeLocation对参数做出修正，统一修正为一个对象，因此对于push(‘/login’)和push({path:’/login’})来说是一样的。
参考
https://v3.router.vuejs.org/zh/guide/essentials/navigation.html
