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
。
通過上述說明,這樣我們就可以通過點選頁面中的超連結,進而跳轉到所想要展示的頁面。