Vue中的vue-router
阿新 • • 發佈：2018-11-15
文章目錄
- 作用：
在一個系統中往往會有很多的頁面組成，在Vue開發中，這些頁面通常使用的是Vue中的元件來實現的。
當一個頁面跳轉到另一個頁面時，其是通過改變url路徑來實現的，那麼這個時候Vue就需要知道當前url對應的是哪個元件頁面，而控制這個的就是vue-router控制元件。
官網
vue-router的官網GitHub地址為：
這裡我使用的是vue-router
1.0版本，其地址如下：
vue-router的使用
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <template id="page1"> <h2>頁面1</h2> </template> <template id="page2"> <h2>頁面2</h2> </template> <div id="app"> <a href="javascript:void(0)" v-link="{path:'/page1'}">頁面1</a> | <a href="javascript:void(0)" v-link="{path:'/page2'}">頁面2</a> <!--路由佔位--> <router-view></router-view> </div> </body> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script src="../../../js/vue/vue-router/1.0/vue-router.js"></script> <script type="application/javascript"> //定義路由根元件 var App = Vue.extend({}); //定義page1頁面 var page1 = Vue.extend({ template:'#page1' }); //定義page2頁面 var page2 = Vue.extend({ template:'#page2' }); //設定路由規則 var router = new VueRouter(); router.map({ 'page1':{ component:page1 } ,'page2':{ component:page2 } }); //開啟路由 router.start(App,'#app'); </script> </html>
結果
分析
上面實現的功能是通過點選頁面的超連結，通過路由規則，以此來跳轉到不同的頁面。
通過程式碼，我們看到，在上面的程式碼中我們一共定義了三個路由元件，分別是跟路由元件App，page1頁面元件與page2頁面元件。
其中App元件是一個空元件，其實現的功能是用於展示其它切換過來的路由頁面，該頁面通過App內定義的router-view佔位符進行展示。
page1頁面元件與page2頁面元件都是定義了單一的頁面，其主要就是用於展示該頁面中的內容。
var router = new VueRouter()用於建立路由規則，路由頁面的跳轉是通過路由規則來實現的，在這裡，我們可以通過路由規則來匹配超連結中的v-link="{path:'/page1'}"
最後通過router.start(App,'#app');來開啟路由規則，這裡需要指明路由的接管區域，也就是說需要指明#app。
通過上述說明，這樣我們就可以通過點選頁面中的超連結，進而跳轉到所想要展示的頁面。