好程式設計師教程分析Vue學習筆記五

好程式設計師教程分析 Vue 學習筆記五 ， 上次我們學習了 Vue 的元件，這次我們來學習一下路由的使用。在 Vue 中，所謂的路由其實跟其他的框架中的路由的概念差不多，即指跳轉的路徑。

 

　　 注意：在 Vue 中，要使用路由，必須匯入 vue-router.js ，並且需要在 vue.js 下方匯入。

　　

　　 具體示例如下：

< div id = "content" >

< router - link to = "/view1" > 檢視一 </ router - link >

< router - link to = "/view2" > 檢視二 </ router - link >

< router - view ></ router - view >

</ div >

 

< script >

// 1. 定義路由元件

var t1 = {template : "<div>hello, view1</div>" }

var t2 = {template : "<div>hello, view2</div>" }

 

// 2. 定義路由規則

var routes = [

{path : "/view1" , component : t1},

{path : "/view2" , component : t2}

] ;

 

// 3. 構建路由

var router = new VueRouter({routes : routes});

 

// 4. 繫結路由

var v = new Vue({

router : router

}).$mount( "#content" );

</ script >

 

分析如下：

在頁面標籤中，需要檢視觸發的事件連結標籤 < router - link > 。然後需要一個切換頁面的顯示檢視標籤。 < router - view >

js 程式碼中，首先定義路由元件，即頁面需要顯示的具體內容。然後定義規則即哪個連結觸發哪個具體內容的顯示。再次需要將上面定義的規則構建成一個 vue 中的路由物件。最後將定義好的路由物件繫結到當前 vue 檢視中。

若連結中需要傳參，可以如下操作：

< router - link : to = "{path:'/view1', query:{name:'leon'}}" > 檢視一 </ router - link >

相當於 /view1?name=leon