1、 什麼是路由？ 註意：作為vue的插件，需要單獨引入js文件，且必須在vue.js之後引入。 <router-link to=“跳轉路徑”></router-link>：該標簽會預設被解析成<a>標簽 <router-view></router-view>：該標簽用於展示組件中的內容，是路由的出 ...
1、 什麼是路由？
路由（vue-router）是負責將進入的瀏覽器請求映射到特定的 組件 代碼中。即決定了由誰(組件)去響應客戶端請求。簡單說路由就是url地址和對應的資源的映射，通過一個路徑的url地址，可以唯一找到一個資源。路由不包含在vue中，是一個插件，需要單獨下載。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/[email protected]/dist/vue-router.js
2、路由的使用
註意：作為vue的插件，需要單獨引入js文件，且必須在vue.js之後引入。
路由的使用步驟：
1、定義模板
2、定義組件
3、創建路由對象
4、將路由對象配置到vue實例中
5、路由調用：
<router-link to=“跳轉路徑”></router-link>：該標簽會預設被解析成<a>標簽
<router-view></router-view>：該標簽用於展示組件中的內容，是路由的出口
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- ==============================5、使用路由==================================== --> <div id="app"> <!-- 使用 router-link 組件來導航：該標簽預設會被解析成一個<a></a>標簽 --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <router-link to="/employee">員工管理</router-link> <router-link to="/department">部門管理</router-link> <router-link to="/storage">倉庫管理</router-link> <hr /> <!--分隔線--> <router-view></router-view> <!--路由出口：用於展示組件中的內容--> </div> <!-- ==============================1、定義組件模板==================================== --> <template id="temp"> <!--這個div是根標簽--> <div> <h1>員工管理</h1> 模板內容 </div> </template> <template id="temp2"> <!--這個div是根標簽--> <div> <h1>部門管理</h1> 模板內容 </div> </template> <template id="temp3"> <!--這個div是根標簽--> <div> <h1>倉庫管理</h1> 模板內容 </div> </template> <script type="text/javascript" src="js/vue.js" ></script> <!--重點--> <!--vue路由必需js文件：要在vue.ja文件後面--> <script type="text/javascript" src="js/vue-router.js" ></script> <!--重點--> <script> /* =================================2、定義組件========================================== */ var emp= Vue.component("compon1",{ template:"#temp" }) var depar = Vue.component("compon2",{ template:"#temp2" }) var stor = Vue.component("compon3",{ template:"#temp3" }) /* =======================3、創建路由對象=================================== */ var route = new VueRouter({ routes:[ { path:"/employee", //路徑 component:emp //路由對應的資源（獲取vue組件對象） }, { path:"/department",//路徑 component:depar //路由對應的資源（獲取vue組件對象） }, { path:"/storage", //路徑 component:stor //路由對應的資源（獲取vue組件對象） } ] }) /* =======================4、將路由對象配置到vue實例中=================================== */ //掛載vue實例 var app= new Vue({ el:"#app", router:route }) </script> </body> </html>
