vue-router 路由基礎的詳解

今天我總結了一下vue-route基礎，vue官方推薦的路由。

一、起步

HTML

<div id="myDiv"> <h1>簡單路由</h1> <router-link to="/foo">Go to foo</router-link>   <router-link to="/bar">Go to bar</router-link>  // 渲染出口 <router-view></router-view></div> 

創建模板（組件）：

(也可以用import 引入外部組件)

  var foo={template:"<p>我是foo 組件</p>"};  var bar={template:"<p>我是bar 組件</p>"};

組件注入路由：

var routes = [   {path:'/foo',component:foo},   {path:'/bar',component:b ar},  ];

創建路由實例：

// 這里還可以傳入其他配置const router = new VueRouter({   routes   // （縮寫）相當于 routes: routes;   });

注意這里 routes 沒有 ‘ r ' (不要寫成 routers)

創建vue實例（并掛載實例）

 var routerVue = new Vue({   router  }).$mount("#myDiv"); 

二、動態路由匹配

有時候我們需要的是模板結構一樣，當時數據不一樣，就相當于我們要把不同ID的登錄用戶連接到同一個頁面，但要顯示每個用戶的獨立信息，這時我們就用到了動態路由匹配。

動態路由主要用到了全局 $route.params 和路由的動態參數，全局route 的 params API 存儲著 路由的所有參數，路徑的參數用 “ ： ”來標記：

HTML

<div id="myDiv">// 點擊對應鏈接時傳入對應參數foo 和 bar <router-link to="/User/:foo">Go to foo</router-link>  <router-link to="/User/:bar">Go to bar</router-link>   <router-view></router-view></div> 

JS

const User = {   template:'<p>我的ID是{{ $route.params.id }}</p>',// 在路由切換時可以觀察路由   watch:{    '$route'(to,form){     console.log(to); //要到達的     console.log(form);    }   }  }  const router = new VueRouter({   routes:[     {path:'/user/:id',component:User} // 標記動態參數 id   ]  });  var myVue = new Vue({    router  }).$mount("#myDiv")

三、嵌套路由

1.嵌套路由講的是我們可以在 <router-view>中去在渲染 <router-view> 這時要在配置路由時使用 children

例如：

HTML：

<div id="myDiv"> <router-link to="/User/:foo">Go to foo</router-link>  <router-link to="/User/:bar">Go to bar</router-link>   <router-view></router-view></div> 

JS：

const User = {   template:'<div><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>',   }   // 子路由   const userChildOne = {    template:'<div>我是 userChildOne</div>'   }   const userChildTwo = {    template:'<div>我是 userChildTwo</div>'   }  const router = new VueRouter({   routes:[     {path:'/user/:id',component:User,      children:[ // 用法和參數和routes 一樣       {path:"/user/childone",component:userChildOne},       {path:"/user/childtwo",component:userChildTwo}      ]     }   ]  });  var myVue = new Vue({    router  }).$mount("#myDiv")