vue-router中$route與$router，path與name，params與query的區別梳理

1、$router和$route的區別

$router : 是路由操做對象，只寫對象
$route : 路由信息對象，只讀對象
栗子：
//$router操做 路由跳轉

this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//$route讀取 路由參數接收

var name = this.$route.params.name;

2、路由跳轉方式name 、 path 和傳參方式params 、query的區別

*path 和 Name路由跳轉方式，均可以用query傳參
栗子：

//Router.js
{
path: '/hello',
name: 'HelloWorld',
component: helloPage
}
跳轉方式name
this.$router.push({
name: 'HelloWorld',
query: {
id: 12345
}
})
跳轉方式path
this.$router.push({
path: '/hello',
query: {
id: 12345
}
})

//獲取路由參數信息方式：
{{$route.query.id}

*path路由跳轉方式,params傳參會被忽略，只能用name命名的方式跳轉

注意：params傳參若是路由上面不寫參數，也是能夠傳過去的，但不會在url上面顯示出你的參數，而且當你跳到別的頁面或者刷新頁面的時候參數會丟失，要怎麼解決？

解決：1、傳參字符串name小的時候，能夠在路由後面加參數名/router1/:name
2、name大的時候用sessionStorage；（歡迎補充）

注意：若是路由爲動態路由{path: '/hello/:id',name:'hello'}
路由跳轉執行this.$router.push({name: 'hello',params: obj});obj裏面只要有id屬性，就會自動帶到URL裏面