vue.js路由vue-router（一）——簡單路由基礎
前言
vue.js除了擁有組件開發體系之外，還有自己的路由vue-router。在沒有使用路由之前，我們頁面的跳轉要麽是後臺進行管控，要麽是用a標簽寫鏈接。使用vue-router後，我們可以自己定義組件路由之間的跳轉，還可以設置稍復雜的嵌套路由，創建真正的spa（單頁面應用）。我之前用vue-cli腳手架寫了一個簡單的人員管理實例，現在我們不用腳手架，就用原生的vue來寫，本文也主要是通過實例來講解vue.js+vue-router相關知識。
簡單路由跳轉實例
1.起步
下載vue-router.js，新建項目文件夾命名為router，將下載的vue-router.js放在router/js/路徑下。新建index.html作為主頁，引入樣式文件，引入兩個關鍵的js，vue和vue-router，再在body標簽底部引入一個main.js用來寫vue實例及配置路由，註意引用順序。
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title>首頁</title> 10 11 <link rel="stylesheet" href="css/main.css"> 12 13 <script src="js/vue.js"></script> 14 15 <script src="js/vue-router.js"></script> 1617 </head> 18 19 <body> 20 21 <div id="app"></div> 22 23 <template></template> //組件區域 24 25 <script src="js/main.js"></script> 26 27 </body> 28 29 </html>
2.定義路由視圖
調用foot-nav組件，將底部導航組件引入在這裏，是因為兩個路由頁面都要用到它
1 <div id="app"> 23 <router-view></router-view> 4 5 <foot-nav></foot-nav> 6 7 </div>
知識點:：<router-view>
<router-view>標簽相當於一個插槽，用於將匹配到的組件渲染出來，一個個路由定義的組件相當於卡，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示。
一個組件可以有多個<router-view>視圖，並用name值去區分它們，這種多用在網頁布局方面，如上左主結構，這個時候就可以定義三個<router-view>
示例
1 <div id="app"> 2 3 <router-view name="top"></router-view> 4 5 <router-view name="left"></router-view> 6 7 <router-view name="main"></router-view> 8 9 </div> 10 11 12 13 <script> 14 15 var topCom = Vue.extend({ 16 17 template: ‘<div>頂部</div>‘ 18 19 }) 20 21 22 23 var leftCom = Vue.extend({ 24 25 template: ‘<div>側邊欄</div>‘ 26 27 }) 28 29 30 31 var mainCom = Vue.extend({ 32 33 template: ‘<div>主頁</div>‘ 34 35 }) 36 37 38 39 var router = new VueRouter({ 40 41 routes:[ 42 43 { 44 45 path: ‘/‘, 46 47 name: ‘home‘, 48 49 components:{ 50 51 top: topCom, 52 53 left: leftCom, 54 55 main: mainCom 56 57 } 58 59 } 60 61 ] 62 63 }) 64 65 66 67 var app = new Vue({ 68 69 el: ‘#app‘, 70 71 router 72 73 }) 74 75 </script>
再為各個板塊設置一下樣式，打開瀏覽器查看效果
3.子組件（底部導航）
3.1 創建子組件
人員管理系統分為兩個模塊，一個首頁，一個管理頁，兩個頁面都需引入一個公共組件：底部導航。在首頁index.html中加入以下模板
1 <template id="footer"> 2 3 <div class="footer fixed"> 4 5 <ul> 6 7 <li><router-link to="/">首頁</router-link></li> 8 9 <li><router-link :to="{name:‘manage‘,params:{id:1}}">人員管理</router-link></li> 10 11 </ul> 12 13 </div> 14 15 </template>
知識點:：<router-link>
<router-link>標簽主要實現跳轉鏈接功能，屬性to=‘/‘即是跳轉到path為‘/‘的路徑（我們等會得配置路徑為‘/‘和‘/manage‘的路由）
router-link除了可以跳轉鏈接之外，還可以傳參，可以傳多個參數，一般格式為
<router-link to="路由路徑"></router-link><router-link :to="{ path:路由路徑}"></router-link><router-link :to="{name:‘路由命名‘,params:{參數名:參數值,參數名:參數值}}"></router-link>知識點：this.$router.push
如果不想用<router-link>標簽，也可以給需要跳轉的地方添加一個點擊事件，在事件裏寫this.$router.push方法
this.$router.push(‘路由路徑‘)this.$router.push({name:‘路由命名‘,params:{參數名:參數值,參數名:參數值}})3.2 註冊子組件
在main.js中全局註冊子組件並且定義vue實例
1 Vue.component(‘foot-nav‘,{ 2 3 template: ‘#footer‘ 4 5 }) 6 7 8 9 var app = new Vue({ 10 11 el: ‘#app‘ 12 13 })
4.首頁及管理頁組件
4.1 創建首頁及管理頁
1 <template id="index"> 2 3 <div> 4 5 首頁 6 7 </div> 8 9 </template> 10 11 <template id="manage"> 12 13 <div> 14 15 人員管理 16 17 <p>id:{{id}}</p> 18 19 </div> 20 21 </template>
4.2 註冊主頁及管理頁
1 var Home = Vue.extend({ 2 3 template: ‘#index‘ 4 5 }) 6 7 8 9 var Manage = Vue.extend({ 10 11 template: ‘#manage‘, 12 13 data(){ 14 15 return{ 16 17 id: ‘‘ 18 19 } 20 21 }, 22 23 mounted:function(){ 24 25 this.id = this.$route.params.id 26 27 } 28 29 })
知識點：this.$route.params
this.$route指向vue實例的路由對象，params是路由傳過來的參數集合
5.定義路由
定義路由router，並引進vue實例中
1 var router = new VueRouter({ 2 3 routes:[ 4 5 { 6 7 path:‘/‘, 8 9 name: ‘home‘, 10 11 component:Home 12 13 }, 14 15 { 16 17 path:‘/manage/:id‘, 18 19 name: ‘manage‘, 20 21 component:Manage 22 23 } 24 25 ] 26 27 }) 28 29 30 31 var app = new Vue({ 32 33 el: ‘#app‘, 34 35 router 36 37 })
知識點：path:‘/路徑/:參數名‘
一個路由要傳參時，需在path路徑後面添加一個‘/’並加上冒號和參數名
知識點：路由激活class
vue-router當路由處於激活狀態時，會有一個class類“router-link-active”，我們只需為這個類添加樣式就可以實現路由激活狀態下的樣式編寫
接下來去瀏覽器查看路由跳轉效果
6.嵌套路由
有時我們項目由多層嵌套組件組成，這個時候就需要用到嵌套路由
先看下圖例子，我們給manage路由再添加兩個子路由
6.1 在組件內部添加<router-view>
1 <template id="manage"> 2 3 <div> 4 5 人員管理 6 7 <ul> 8 9 <li><router-link to="/manage/list">人員列表</router-link></li> 10 11 <li><router-link to="/manage/edit">編輯</router-link></li> 12 13 </ul> 14 15 <router-view></router-view> 16 17 </div> 18 19 </template>
6.2 定義子路由
1 //構建組件 2 3 var List = Vue.extend({ 4 5 template: ‘<div>人員列表</div>‘ 6 7 }) 8 9 10 11 var Edit = Vue.extend({ 12 13 template: ‘<div>編輯</div>‘ 14 15 }) 16 17 18 19 20 21 22 23 var router = new VueRouter({ 24 25 routes:[ 26 27 { 28 29 path:‘/‘, 30 31 name: ‘home‘, 32 33 component:Home 34 35 }, 36 37 { 38 39 path:‘/manage‘, 40 41 name: ‘manage‘, 42 43 component:Manage, 44 45 //子路由由children表示 46 47 children:[ 48 49 { 50 51 path:‘list‘, 52 53 name: ‘list‘, 54 55 component:List 56 57 }, 58 59 { 60 61 path:‘edit‘, 62 63 name: ‘edit‘, 64 65 component:Edit 66 67 } 68 69 ] 70 71 } 72 73 ] 74 75 })
7.路由重定向
未設置路由重定向時，當我們隨意輸入一個路徑，會顯示一片空白或404。為了防止這種現象發生，我們一般在配置路由時再定義一個重定向路由
1 2 var router = new VueRouter({ 3 4 routes:[ 5 6 { 7 8 path:‘/‘, 9 10 name: ‘home‘, 11 12 component:Home 13 14 }, 15 16 { 17 18 path:‘*‘, 19 20 redirect: ‘/‘ 21 22 }, 23 24 ] 25 26 })
打開瀏覽器，隨意輸入一個未定義的路由查看效果
vue.js路由vue-router（一）——簡單路由基礎