vue中的路由講三點
第一點：指令級別的路由<router-link>和程式級別的路由router.push();
第二點：通過query和params傳遞引數和path和name之間的關係。
第三點: $router和$route地區別

宣告：由於路由和傳參和引數獲取密切結合，所以將他們混合在一起講解，最後會附加一個例項。

html中通過<router-link>指令完成路由跳轉
第一種情況就是以path形式
<router-link v-bind:to="/foo">登幽州臺歌</router-link>
第二種情況就是以路由物件Object的形式
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br>
注意這裡的name指的是具名路由，在路由列表中的配置如下
{ name: 'wuhan', path: '/wuhan', component: WuHan }
而WuHan則是這個路由要抵達的模板或者說頁面，定義如下
const WuHan = {template: '<div>武昌， 漢口， 漢陽 --- {{$route.query.city}}</div>'}
注意由於在<router-link>中是通過query的形式區傳遞引數，所有在目的地頁面中也只能採用query的形式獲取引數。
也可以不採用query的方法，而採用params的形式傳遞引數
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
那麼在在路由列表中的path中必須帶上params傳遞過來的引數，否則在目的頁面中無法獲取引數
{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }
在目的頁面中以params的形式獲取引數對應的值
const WuHan = {template: '<div>武昌， 漢口， 漢陽 --- {{$route.params.city}}</div>'}
注意事項：不可以在<router-link>的路由物件中同時出現path和params，此時params作廢。目的頁面中獲取不到引數。
推薦是name和params搭配，path和query搭配。最好時不用params而只是用query的形式傳遞引數以及獲取引數，
因為採用params的方式傳遞引數，當你進入到目的頁面後確實能夠正確地獲取引數,但是，當你重新整理頁面時，引數就會丟失。
所以推薦使用query地形式傳遞引數。

最後談談$router和$route地區別。結論：沒有任何關係。
$router地型別時VueRouter，整個專案只有一個VueRouter例項，使用$router是實現路由跳轉的，$router.push()。
跳轉成功後，抵達某一個頁面，此時要獲取從上一個頁面傳遞過來的引數，此時使用$route。
或者是$route.query.city，或者是$route.params.city。也就是說，$router和$route作用在路由不同的階段。