閱讀目錄
一. vue-router是什麼？
vue-router是vue.js官方的路由外掛，它和vue.js是整合的。它用於構建單頁面應用，vue的單頁面應用是基於路由和元件的，路由是用於設定訪問路徑的，並且路徑和元件會產生對映起來。在vue-router單頁面應用中，路徑之間的切換，可以理解為元件的切換，路由模組的本質：是建立起url和頁面之間的對映關係。
二：vue-router的實現原理
vue-router是用於構建單頁面的，單頁面的核心是更新檢視而不會重新請求頁面，這也就是為什麼在頁面中不用a標籤的原因，因為頁面只有一個index.html。那麼它在實現單頁面前端路由時，提供了兩種模式，hash模式和History模式。預設情況下是使用hash模式。
2.1 hash模式
hash是URL的錨點(#), 代表網頁中的一個位置，如果只改變#後的部分，瀏覽器會滾動到相應的位置，而不會重新載入網頁，並且每次改變#後的部分，都會在瀏覽器的訪問歷史中增加一條記錄，當我們使用後退按鈕的時候，就可以返回到上一個位置。因此hash模式通過錨點值的改變，根據不同的值，渲染指定DOM位置的不同資料。
2.2 history模式
上面是通過hash模式的，頁面的地址就會加上 # 號，比如我們的地址類似這樣的：http://localhost:8080/#/，我們使用history的話，那麼訪問頁面的時候就和平常一樣，不帶井號的；如下地址也可以訪問 http://localhost:8080/ ，使用路由history模式的話，只需要在配置路由規則時，加入 'mode': 'history'即可，它是利用html5中的 history.pushState的API來完成的URL跳轉，無需重新載入頁面的。
不過這種配置需要後臺開發支援一下的，具體怎麼配置，下面會詳細講到。
三：vue-router使用及程式碼配置
在vue-router中，定義了兩個標籤<router-link>和<router-view>來對應點選和顯示，<router-link>是點選的部分，<router-view>是定義顯示的部分，當我們點選之後，路由匹配元件的內容後會在<router-view>顯示出來，<router-link>還需要一個屬性 to, 它的含義就是到哪裡去的意思。
比如 <router-link to="/home">111</router-link> 的含義是當我們點選111的時候，它會找到home相對應的元件，然後會在 <router-view>中顯示出來。
理解配置路由
路由一般使用兩個部分組成，path和component，path指路徑，component指的是元件，它是一個物件，比如 { path: '/home', component: home }
比如我們這邊定義兩條路由，如下程式碼：
const routes = [ { path: '/home', component: Home }, { path: '/xxx', component: XXX } ];
2. 建立router管理
建立router對路由進行管理，它是由建構函式 new vueRouter()建立，接收上面的routes引數。如下程式碼：
const router = new vueRouter({ routes: routes });
3. 實列注入到vue根實列中
我們接著把上面router實列注入待vue根實列中，我們就可以使用路由了。如下程式碼：
new Vue({ el: '#app', router: router, render: h => h(Index) });
在配置程式碼之前，我們還是看看我們的專案整個目錄結構如下：(基於第十三篇文章的基礎之上再進行構建的)。
### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |--- app | | |---index | | | |-- views # 存放所有vue頁面檔案 | | | |-- components # 存放vue公用的元件 | | | |-- app.js # vue入口配置檔案 | | | |-- router.js # 路由配置檔案 | |--- views | | |-- index.html # html檔案 | |--- webpack.config.js # webpack配置檔案 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉碼檔案
在app/index/views 新建home.vue 和 xxx.vue 檔案。
1. home.vue 程式碼如下：
<style lang='stylus'> .home-container width 100% </style> <template> <div class="home-container"> <h1>歡迎來到Home</h1> <p>{{msg}}</p> </div> </template> <script type="text/javascript"> export default { data() { return { msg: '我是Home元件' } } } </script>
xxx.vue 程式碼如下：
<style lang='stylus'> .xxx-container width 100% </style> <template> <div class="xxx-container"> <h1>歡迎來到xxx</h1> <p>{{msg}}</p> </div> </template> <script type="text/javascript"> export default { data() { return { msg: '我是XXX元件' } } } </script>
2. 接著在 app/index/views 新建index.vue, 程式碼如下：
<style lang="stylus"> </style> <template> <div id="app"> <header> <router-link to='/home'>Home</router-link> <router-link to='/xxx'>XXX</router-link> </header> <!-- 對應元件的內容渲染到router-view中 --> <router-view></router-view> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
3. 在 app/index/router.js定義router，路徑到元件的對映。 新增如下程式碼：
import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入元件 import home from './views/home'; import xxx from './views/xxx'; // 告訴 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/home', component: home }, { path: '/xxx', component: xxx }, { path: '*', // 其他沒有的頁面都重定向到 home頁面去 redirect: '/home' } ] var router = new VueRouter({ routes: routes }); export default router;
當然上面引入元件的方法，我們還可以懶載入的方式載入，懶載入引入的優點是：當我們訪問頁面的時候才會去載入相關的資源，這樣的話，能提高頁面的訪問速度。
比如如下這樣：component: resolve => require(['@/views/HelloWorld'], resolve) // 使用懶載入
因此我們可以把上面的程式碼寫成如下：
import Vue from 'vue'; import VueRouter from 'vue-router'; /* // 引入元件 import home from './views/home'; import xxx from './views/xxx'; */ // 告訴 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/home', component: resolve => require(['./views/home'], resolve) // 使用懶載入 }, { path: '/xxx', component: resolve => require(['./views/xxx'], resolve) // 使用懶載入 }, { path: '*', // 其他沒有的頁面都重定向到 home頁面去 redirect: '/home' } ] var router = new VueRouter({ base: '/app/index', // 配置單頁應用的基路徑 routes: routes }); export default router;
如上base的含義：應用的基路徑，比如整個單頁應用服務在 /app/index 下，那麼base就應該設定為 /app/index.
4. 實列注入到vue根實列中。
把路由注入到根實列中，啟動路由，我們在app/index/app.js 入口檔案新增如下程式碼：
import Vue from 'vue'; import Index from './views/index'; // 引入路由 import router from './router'; new Vue({ el: '#app', router: router, render: h => h(Index) });
因此要執行上面程式碼之前，我們先要 下載 vue-router 到我們專案中來，如下程式碼命令：
npm i vue-router --save
下載完成後，我們再來執行打包命令，npm run dev 後，就可以啟動頁面了。
在頁面訪問如下
四：理解vue設定路由導航的兩種方法。
vue設定路由導航的兩種方法有 <router-link :to=''> 和 router.push().
4.1 to的值可以是一個字串路徑，或者一個描述地址的物件。比如如下都是可以的。
// 字串 <router-link to='/home'>Home</router-link> // 物件 <router-link :to="{path: '/home'}">Home</router-link> // 命名路由 <router-link :to="{name: 'home'}">Home</router-link> /* 如果是命名路由的話，需要在router.js 加上name欄位，如下程式碼： const routes = [ { path: '/home', name: 'home', component: resolve => require(['./views/home'], resolve) // 使用懶載入 }, { path: '/xxx', name: 'xxx', component: resolve => require(['./views/xxx'], resolve) // 使用懶載入 }, { path: '*', // 其他沒有的頁面都重定向到 home頁面去 redirect: '/home' } ] */ // 直接路由帶查詢引數query，位址列就變成 /home?id=1 <router-link :to="{path: 'home', query: {id: 1 }}">Home</router-link> // 如果是path的話，路由帶引數params的話，params是不會生效的。如下程式碼 params的引數是不會在位址列中顯示的。 <router-link :to="{path: 'home', params: {id: 1 }}">Home</router-link> // 命名路由帶路由引數params,位址列還是 /home, 但是可以通過 this.$route.params.id拿到值的 <router-link :to="{name: 'home', params: {id: 1 }}">Home</router-link>
4.2 router.push()方法
// 支援字串 this.$router.push('xxx'); // 支援物件 this.$router.push({ path: 'xxx' }); // 支援命名路由方式 this.$router.push({ name: 'xxx' }); // 直接路由帶查詢引數 query, 位址列變成 /xxx?id=1 this.$router.push({ path: 'xxx', query: { id: 1 } }); // 命名路由帶查詢引數query，位址列變成 /xxx?id=1 this.$router.push({ name: 'xxx', query: { id: 1 } }); // 如果提供了path，直接路由帶引數params, params不會生效，在xxx頁面通過 // console.log(this.$route.params.id) 是獲取不到值的。 this.$router.push({ path: 'xxx', params: { id: 1 } }); // 命名路由帶路由引數params，位址列是/xxx。在xxx頁面通過 console.log(this.$route.params.id) 是可以獲取到值的。 this.$router.push({ name: 'xxx', params: { id: 1 } });
總結：1. 無論是直接路由path還是命名路由name，帶查詢引數query，位址列會變成 /url?查詢引數名=查詢引數值
2. 直接路由path帶路由引數params，params不生效。在xxx頁面通過 console.log(this.$route.params.id) 是獲取不到值的。
3. 命名路由name帶路由引數params位址列保持是 /url/路由引數值。在xxx頁面通過 console.log(this.$route.params.id) 是可以獲取到值的。
五：理解動態路由和命名檢視
5.1 動態路由
動態路由也可以叫做路由傳參。
在前面我們介紹了路由導航功能是不能傳遞引數的，我們可以叫他們靜態路由，而能傳遞引數的路由模式，並且對應的路由數量是不確定的，因此我們可以叫他動態路由。
應用場景：當我們的多個頁面或元件都要被多次重複利用的時候，我們的路由都指向同一個元件，這時候從不同的地方進入相同的元件的時候，我們根據傳遞的引數不同，來渲染不同的資料。
比如如下程式碼：
const routes = [ { path: '/xxx/:id', // 動態路由資訊 name: 'xxx', component: resolve => require(['./views/xxx'], resolve) // 使用懶載入 } ];
如上程式碼 path: /xxx/:id, 這種形式，這樣定義之後，vue-router將會匹配所有的 /xxx/1, /xxx/2,.....
比如我現在有多個頁面需要進入xxx元件內，這時候我們可以在配置路由路徑後加個:id。index.vue 改成如下程式碼：
<template> <div id="app"> <header> <router-link to="home">Home</router-link> <router-link to='xxx/on'>XXX</router-link> </header> <!-- 對應元件的內容渲染到router-view中 --> <router-view></router-view> </div> </template>
當我點選 XXX 時候，會進入xxx元件內，那麼在xxx.vue元件內，可以通過 this.$route.params.id 獲取傳的引數值了。
如下圖所示：
5.2 理解命名檢視
有時候我們想同時顯示多個檢視，比如一個單頁應用頁面，有側導航(sidebar) 和 頭部(header) 和 main(主內容)等三個檢視，這個時候命名檢視就派上用場了。
我們可以在頁面中擁有多個單獨命名的檢視，而不是和我們上面一樣只有一個單獨的檢視。如果 router-view 沒有設定名字，那麼預設為default。
現在我們可以在 app/index/components 新建資料夾為sidebar, header, main, 及在各對應的目錄下新建index.vue.
現在我們的專案的目錄結構變成如下了：
### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |--- app | | |---index | | | |-- views # 存放所有vue頁面檔案 | | | | |-- home.vue | | | | |-- index.vue | | | | |-- xxx.vue | | | |-- components # 存放vue公用的元件 | | | | |--- header | | | | | |-- index.vue # 公用的頭部元件 | | | | |--- main | | | | | |-- index.vue # 主體元件 | | | | |--- sidebar | | | | | |-- index.vue # 側導航公用的元件 | | | | | | | | |-- app.js # vue入口配置檔案 | | | |-- router.js # 路由配置檔案 | |--- views | | |-- index.html # html檔案 | |--- webpack.config.js # webpack配置檔案 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉碼檔案
app/index/components/header/index.vue 程式碼如下：
<style lang="stylus"> * {margin: 0; padding: 0} .header-container width 100% height 50px background #000 div font-size 16px color #fff text-align center </style> <template> <div class="header-container"> <div>我的頭部導航</div> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
app/index/components/sidebar/index.vue 程式碼如下：
<style lang="stylus"> .sidebar-container width 200px height 100% min-height 500px background red float left div font-size 12px color #fff text-align center </style> <template> <div class="sidebar-container"> <div>我的左側導航</div> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
app/index/components/main/index.vue 程式碼如下：
<style lang="stylus"> .main-container margin-left 200px height 100% min-height 500px background green div font-size 12px color #fff text-align center </style> <template> <div class="main-container"> <div>我的主體部分</div> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
框架搭建完成後，我們需要在index.vue 程式碼變成如下：
<style lang="stylus"> </style> <template> <div id="app"> <!-- <header> <router-link to="/home">Home</router-link> <router-link to='/xxx/on'>XXX</router-link> </header> --> <router-view name="Header"></router-view> <router-view name="Sidebar"></router-view> <router-view name="Main"></router-view> <!-- 對應元件的內容渲染到router-view中 --> <router-view></router-view> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
接著我們需要在router.js下配置程式碼如下：
import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入元件 import home from './views/home'; import xxx from './views/xxx'; // 告訴 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/home', name: 'home', components: { default: resolve => require(['./views/home'], resolve), // 使用懶載入 Header: resolve => require(['./components/header/index'], resolve), // 使用懶載入 Sidebar: resolve => require(['./components/sidebar/index'], resolve), // 使用懶載入 Main: resolve => require(['./components/main/index'], resolve) // 使用懶載入 } }, { path: '/xxx/:id', name: 'xxx', components: { default: resolve => require(['./views/xxx'], resolve), // 使用懶載入 Header: resolve => require(['./components/header/index'], resolve), // 使用懶載入 Sidebar: resolve => require(['./components/sidebar/index'], resolve), // 使用懶載入 Main: resolve => require(['./components/main/index'], resolve) // 使用懶載入 } }, { path: '*', // 其他沒有的頁面都重定向到 home頁面去 redirect: '/home' } ] var router = new VueRouter({ base: '/app/index', // 配置單頁應用的基路徑 routes: routes }); export default router;
然後打包執行下，在瀏覽器上可以看到如下圖所示的結構。
如上可以看到，我們可以使用 命名檢視 來搭建我們網站的框架，這可以理解命名檢視的作用了。
六：理解巢狀路由
什麼是巢狀路由？比如我們進入到我們home頁面的時候，它下面還有分類，比如叫 java書籍，node書籍等，那麼當我點選各個類目的時候，就對應到相應的元件。比如首先我進入的是 /home 這個路由，然後當我進入 /home下面的分類的 java書籍的話，那麼我們的路由就是 /home/java, 如果進入分類的是 node書籍的話，那麼路由就是 /home/node 了。因此 vue提供了 childrens這個屬性來做這件事，它也是一組路由。
首先我們在 app/index/views 下 新建 java.vue 和 node.vue.
java.vue程式碼如下：
<style lang='stylus'> .java-container width 100% </style> <template> <div class="java-container"> <h1>歡迎來到java類書籍</h1> <p>{{msg}}</p> </div> </template> <script type="text/javascript"> export default { data() { return { msg: '我是java元件' } }, methods: { } } </script>
node.vue 程式碼如下：
<style lang='stylus'> .node-container width 100% </style> <template> <div class="node-container"> <h1>歡迎來到node類書籍</h1> <p>{{msg}}</p> </div> </template> <script type="text/javascript"> export default { data() { return { msg: '我是node元件' } }, methods: { } } </script>
app/index/router.js 程式碼就改成如下：
import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入元件 import home from './views/home'; import xxx from './views/xxx'; // 告訴 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/home', name: 'home', component: resolve => require(['./views/home'], resolve), // 子路由 children: [ { path: 'java', component: resolve => require(['./views/java'], resolve) }, { path: 'node', component: resolve => require(['./views/node'], resolve) } ] }, { path: '/xxx/:id', name: 'xxx', component: resolve => require(['./views/xxx'], resolve) }, { path: '*', // 其他沒有的頁面都重定向到 home頁面去 redirect: '/home' } ] var router = new VueRouter({ base: '/app/index', // 配置單頁應用的基路徑 routes: routes }); export default router;
app/index/views/index.vue 程式碼如下：
<style lang="stylus"> </style> <template> <div id="app"> <header> <router-link to="/home" tag='li'>Home</router-link> <router-link to="/home/java">java</router-link> <router-link to="/home/node">node</router-link> <router-link to='/xxx/on'>XXX</router-link> </header> <!-- <router-view name="Header"></router-view> <router-view name="Sidebar"></router-view> <router-view name="Main"></router-view> --> <!-- 對應元件的內容渲染到router-view中 --> <router-view></router-view> </div> </template> <script type="text/javascript"> export default { data() { return { } } } </script>
如上程式碼增加完成後，進行打包，編譯都正常，但是點選java或node的時候，子路由一直沒有渲染到對應的元件，網上很多資料說，子路由多寫了 /, 但是我router.js裡面也沒有這些東西的，但是經過搜尋，發現問題並不是在這裡，而是說在巢狀的子模組裡面引用子路由的時候，也需要加上 <router-view></router-view> 這句程式碼，如下是home.vue 程式碼：
<template> <div class="home-container"> <h1>歡迎來到Home</h1> <p>{{msg}}</p> <p @click="func">進入index頁面</p> <router-view></router-view> </div> </template>
注意：路由巢狀的真正的含義是：點選子路由的時候，父級元件還是會顯示的，子元件也會顯示的，這才是使用子路由巢狀的用途。
如果僅僅想顯示子元件的話，不想顯示父元件的話，那就不要使用路由巢狀，直接使用兄弟路由，寫死路徑即可。
比如
const router = [ { path: '/home', name: 'home', component: resolve => require(['./views/home'], resolve), }, // 兄弟路由 { path: '/home/java', name: 'home', component: resolve => require(['./views/java'], resolve), } ]
github原始碼 webpack+vue+router