vue中$router以及$route的使用

路由基本概念

• route，它是一條路由。

{ path: '/home', component: Home }

• routes，是一組路由。

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

• router能夠理解爲一個容器，或者說一種機制，它管理了一組route。簡單來講，route只是進行了URL和函數的映射，而在當接收到一個URL以後，去路由映射表中查找相應的函數，這個過程是由router來處理的。

const router = new VueRouter({
          routes // routes: routes 的簡寫
    })

VUE中

• $route爲當前router跳轉對象裏面能夠獲取name、path、query、params等。
• $router爲VueRouter實例，想要導航到不一樣URL，則使用$router.push方法，返回上一個history使用$router.go方法。跟上面說的同樣，這裏的$router就管理路由的跳轉，英文裏er結尾的都表示一種人，這裏你能夠把這個想象中一個管理者，他來控制路由去哪裏（push、go），這樣就比較容易記。

路由跳轉

• 1 能夠手寫完整的path：

this.$router.push({path:`/user/${userId}`})

這種方式須要在路由中做以下配置

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

這種接收參數的方式是this.$route.params.userId。

• 2 也能夠用params傳遞：

this.$router.push({name:'Login',params:{id:'leelei'}})
//不帶參數 變成 ip/login

• 3 也能夠用query傳遞：

this.$router.push({path:'/login',query:{id:'leelei'})
//帶查詢參數變成 ip/login?id=leelei
//帶斜槓/表明從根目錄出發，不會嵌套以前的路徑

query傳參是針對path的，params傳參是針對name的。。接收參數的方式都差很少。。this.$route.query.和this.$route.params.

注意這只是跳轉url，跳轉到這個url顯示什麼組件，得配置路由。router跳轉和<router-link>標籤跳轉，規則差很少。

一些須要注意的事

• 使用query傳參的話，會在瀏覽器的url欄看到傳的參數相似於get請求，使用params傳參的話則不會，相似於post請求。
• 若是提供了path，params將會被忽略（即若是要使用params傳參，則必定要使用name），可是query不屬於這種狀況。若是使用完整路徑和query傳參，刷新頁面時不會形成路由傳參的參數丟失。
• router.push和router.replace的區別是：replace不會向 history 添加新記錄，而是替換掉當前的 history 記錄，即便用replace跳轉到的網頁‘後退’按鈕不能點擊。

最後

謝謝你們，若是有錯誤的地方請指出。