路由基本概念
- 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跳轉到的網頁‘后退’按鈕不能點擊。
轉載自：https://segmentfault.com/a/1190000016662929