一、params、query是什么？

• params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params
• query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。

1、用法上的
query要用path來引入，params要用name來引入，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name。

注意接收參數(shù)的時候，已經(jīng)是 $route 而不是$router了哦??！

2、展示上的
區(qū)別：

• query更加類似于我們ajax中g(shù)et傳參，params則類似于post

二、寫法如下

//params方式
methods:{
      clickme:function(){
        this.$router.push({this.$router.push({ name: 'user', params: { id: 'user', name: 'user', age: 'John' }
,query: { id: 's', name: 'ss', age: 'John' }})
      }
    }

注意：路由設(shè)置這里，當(dāng)你使用params方法傳參的時候，要在路由后面加參數(shù)名，并且傳參的時候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對應(yīng)。使用query方法，就沒有這種限制，直接在跳轉(zhuǎn)里面用就可以。(例如：params的name與id必須與路由匹配，否則無效果)。并且當(dāng)你跳到別的頁面后刷新頁面的時候params參數(shù)會丟失，那依賴這個參數(shù)的http請求或者其他操作就會失敗。

//query方式
methods:{
      clickme:function(){
        this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
      }
    }

三、實例如下

//home.vue
<template>
   <div>
       <h3>{{home}}</h3>
       <span @click="clickme">user頁面</span>
       <router-view/>
   </div>
</template>
<script>
export default{
   data(){
       return{
           home:'Home頁面'
       }
   },
   methods:{
     clickme:function(){
       this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
     }
   }
}
</script>

//router/index.js
const routers= new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        { path: 'index', name:'index', component: Index },
      ]
    },
    {
      path: '/about',
      component: About
    },{
      name:'user',
      path: '/user/:id',
      component: User
    }
  ]
});