vue-router两种传参方式query和params区别

//1.展示在地址栏不同 
//params  /home/123   value
//query  /home?id=123  key-value

//2.路由配置不同
//query
{
    path:'/home',
    name:'home',
    component:home
}
//params  需要配置路径
{
   path:'/home:id',
   name:'home',
   component:home
}
//由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。
//params
router.push({ name: 'home', params: { id: 123 } })
//<router-link :to="{name:'home',params: { id: 123 }}"></router-link>

//query
router.push({ path: '/home', query: { id: 123 } })
//<router-link :to="{path:'home',query: { id: 123 }}"></router-link>
//传参时，如果使用path后面的params会被忽略，query可以识别，要传params那就使用name

//还有一种方式是自己拼接字符串
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/home/${id}`) // -> /home/id
router.push({ path: `/home/${id}` }) // -> /home/id
//router-link 一样
//<router-link :to="`/home/${id}`"></router-link>