Vue-Router是Vue的官方路由器，它和Vue的核心深度集成，讓構建單頁面應用變得亦如反掌。
閱讀VueRouter的源碼需要深刻理解Vue才能完全理解,因為它里面很多概念用到了Vue，相比較vuex、axios，我認為Vue-Router的源碼比較晦澀，難以理解，原因如下:
- Router-view是一個函數式組件，它的渲染需要理解父子組件的一個鏈的一個知識
- Router-Link組件自定了render函數
為了更好理解Vue-Router,我計划分8篇文章來講，計划這個月底前寫完(4月份開始寫React的知識了)
- VueRouter的使用方法
- VueRouter的設計思想及代碼結構
- VueRouter實例的屬性和方法
- $router與$route的區別
- router-link組件的用法及原理
- router-view組件的用法及原理
- VueRouter.push()的詳解
- 導航守衛的用法和原理
writer by:大沙漠 QQ:22969969
VueRouter使用前需要npm install安裝一下:
writer by:大沙漠 QQ:22969969
npm install vue-router
然后先用Vue.use(Router)安裝一下VueRouter這個插件，再創建一個VueRouter示例，一般單獨創建一個router目錄，用於存儲router的對象,如下:
import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Login from '../components/Login' Vue.use(Router) //安裝VueRouter export default new Router({ //導航VueRouter的實例 mode:'history', routes: [ { path: '/login', name: 'login', component: Login }, { path: '/', name: 'home', component: Home } ] })
最后在創建根Vue實例的時候通過router屬性傳入這個對象就可以了
為了實例方便，我們用script標簽引入一下vue、vuerouter，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueRouter Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script> </head> <body> </body> </html>
這樣就可以在body內寫測試例子了，如果是通過script標簽引用vue、vuerouter的話，VueRouter插件會自動安裝的，不需要調用Vue.use(Router)來安裝了
OK，環境搭建好了，現在來個例子(后面的例子都把代碼放入上面的<body></body>標簽內即可)，如下:
<div id="app"> <h1>Hello App!</h1> <router-link to="/login">登陸</router-link> <router-link to="/hello">Hello頁</router-link> <router-link to="/info/13">詳情頁1</router-link> <router-link to="/info/12">詳情頁2</router-link> <hr/> <router-view></router-view> </div> <script> const login = { template:'<div>Login Page!</div>'} //定義三個組件 const hello = { template:'<div>Hello World!</div>' } const info = { template:'<div>id:{{this.$route.params.id}}</div>'} const routes = [ //定義路由指向 {path:'/login',component:login}, {path:'/hello',name:'user',component:hello}, {path:'/info/:id',component:info}, ] var router = new VueRouter({ //創建一個VueRouter實例 routes }) const app = new Vue({ el:'#app', router:router //創建Vue實例時傳入router即可 }) </script>
這里我們創建了一個Vue和一個VueRouter實例，並把VueRouter的實例作為router屬性傳遞給Vue,頁面渲染如下:
組件寫得比較簡單，我們通過new VueRouter創建VueRouter實例時可以傳入一個對象，該對象可以傳遞如下鍵:
- routes ;路由的記錄，是個數組，每個元素是一對象
- mode ;路由的模式 ;可以設置為:hash(默認的模式)、history、abstract(非瀏覽器模式下)
- base ;應用的基地址 ;如果整個單頁應用服務在/app/下，那么base應該設為"/app/"
- linkActiveClass ;全局配置 <router-link> 默認的激活的 class
- linkExactActiveClass ;全局配置 <router-link> 默認的的精確激活的 class
- scrollBehavior ;和滾動行為有關
- parseQuery/stringifyQuery ;提供自定義查詢字符串的解析/反解析函數。覆蓋默認行為
- fallback ;當瀏覽器不支持history.pushState控制路由時是否應該回退到hash模式，默認為true
比較常用的就是router了，是個對象，可以傳入如下鍵:
- path ;該路由的路勁
- name ;該路由的name
- redirect ;重定向相關
- meta ;路由元信息，可以存儲該路由的一些屬性，很有用的
- components ;對應的組件，值是一個對象格式，和命名視圖相關
- component ;默認組件，是個字符串格式
- alias ;別名
- children ;路由嵌套相關
- beforeEnter ;導航守衛相關
VueRouter提供了兩個組件:
- router-link 支持用戶在具有路由功能的應用中 (點擊) 導航， ;就是渲染出一個元素(默認為a),觸發該元素上的事件會產生路由跳轉
- router-view 渲染路徑匹配到的視圖組件 ;根據當前環境尋找到合適的組件並渲染出來
具體到每個點的介紹，后面再介紹，本篇先開個頭，下一篇文章講解VueRouter的設計思想及代碼結構