作者 | Jeskson
掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb
2020.1.11
背景介紹
vue router是vue.js官方的路由管理器，它和vue.js的核心深度內建，讓建構單頁面應用變得易如反掌，它的功能有：
嵌套的路由，或者是，視圖表；子產品化的，基于元件的路由配置；路由參數，查詢，通配符，基于Vue.js過渡系統的視圖過渡效果，細粒度的導航控制；帶有自動激活的CSS class的連結，HTML5曆史模式或者是hash模式，在IE9中自動降級；自定義的滾動條行為。
面試官提問，你能說出路由的概念嗎？能說明一下vue-router的基本使用步驟嗎？或者讓你說出vue-router的嵌套路由用法怎麼用？
再次詢問你vue-router如何實作動态路由比對用法呢？請說出vue-router命名路由用法？請說出vue-router程式設計式導航用法？
在實際業務中，去實作基于路由的方式。
快速入門
如何快速入門并掌握呢？了解路由的屬性配置說明，如何頁面跳轉，如何子路由-路由嵌套，路由的傳遞參數，命名路由，命名視圖，重定向，别名，過渡動畫，mode與404，路由的鈎子，路由的懶加載。
快速入門第一步安裝，vue-router是一個插件包，需要用npm來安裝。
npm install vue-router --save
vue-cli建構項目。router/index.js中。
// 引入vueimport Vue from 'vue'// 引入vue-router路由依賴import Router from 'vue-router'// 引入頁面元件，命名為HelloWorldimport HelloWorld from '@/components/HelloWorld'// Vue全局使用RouterVue.use(Router)// 定義路由配置export default new Router({ routes: [ //配置路由 { path: '/', //連結路徑 name: 'HelloWorld', //路由名稱 component: HelloWorld //對應元件模闆 } ]})
使用：main.js中
// 引入vueimport Vue from 'vue'// 引入根元件import App from './App'// 引入路由配置import router from './router'// 關閉生産模式下給出的提示Vue.config.productionTip = false// 定義執行個體new Vue({ el: '#app', router, // 注入架構中 components: { App }, template: ''})
頁面跳轉：
<router-link to="/">[顯示字段]router-link><router-link to="/hello">hellorouter-link>this.$router.push('/xxx')<button @click="goHome">回到首頁button>export default { name: 'app', methods: { goHome(){ this.$router.push('/home'); } }}// 後退一步this.$router.go(-1)// 前進一步this.$router.go(1)
目錄
那麼這篇是根據面試官會問的進行解答，請看下方目錄：
在開發中，路由分後端路由和前端路由，後端路由是根據不同的使用者的url請求，傳回不同的内容，本質是url請求位址與伺服器資源之間的對應關系。
後端路由
過程，浏覽器請求url位址到後端伺服器，請求url位址被後端路由攔截，伺服器中有伺服器資源内容，是url位址所要請求的資源内容，請求到伺服器資源内容被後端路由攔截傳遞給浏覽器。
SPA，後端渲染是由性能問題的，使用者與伺服器有經常送出多，後端路由就會導緻網頁的頻繁重新整理，導緻性能問題，就有了ajax前端渲染，SPA是單頁面應用程式，整個網站隻有一個頁面，内容變化是通過ajax局部更新實作，同時支援浏覽器位址的前進和後退操作，spa的實作原理之一是基于url位址上的hash。
注意，hash的變化會導緻浏覽器記錄通路曆史的變化，但是hash的變化不會觸發新的url請求，在實作spa過程中，最核心的技術就是前端路由。
前端路由
前端路由是根據不同的使用者事件，顯示不同的頁面内容，本質是使用者事件和事件處理函數之間的對應關系，使用者觸發事件，響應浏覽器，浏覽器中含有前端路由，事件處理函數，使用者觸發事件給到前端路由，響應事件處理函數，事件函數渲染相應内容給使用者。
實作簡單的前端路由是基于url中的hash實作的，點選菜單時改變url的hash值，根據hash的變化控制元件的切換。
監聽window的onhashchange事件，根據擷取到的最新的hash值，切換要顯示的元件的名稱
window.onhashchange = function() { // 通過location.hash擷取到最新的hash值}
簡單的執行個體：
// 切換元件的超連接配接
首頁
财經
娛樂
// :is屬性指定的元件名稱，把對應的元件渲染到component标簽所在位置
// 可以把component标簽目前元件的占位符
定義四個元件
const zhuye = { template； '
da1
da1
'}const keji = { template: '
da2
da2
'}const caijing = { template: '
da3
da3
'}const yule = { template: '
da4
da4
'}
注冊元件
const vm = new Vue({ el: '#app', data: {}, // 注冊元件 components: { zhuye, keji, caijing, yule } })
動态切換
<component :is="comName">data: { comName: 'zhuye'}
監聽window的onhashchange事件，根據擷取到的最新的hash值，切換要顯示的元件的名稱
window.onhashchange = function() { // 通過location.hash擷取到最新的hash值 console.log(location.hash);}href="#/zhuye" target="_blank" rel="external nofollow"
使用switch判斷
switch(location.hash.slice(1) { case '/zhuye': vm.comName = 'zhuye' break; case '/keji': vm.comName = 'keji' break; case '/caijing': vm.comName = 'caijing' break; case '/yule': vm.comName = 'yule' break; }
vue-router路由管理器
vue router和vue.js的核心深度內建，可以友善的用于spa的應用程式開發
它的功能有：
支援HTML5曆史模式，和hash模式；支援嵌套路由；支援路由參數，支援程式設計式路由，支援命名路由。
路由的進階，導航守衛，路由元資訊，過渡效果，資料擷取，滾動行為，路由懶加載。
vue-router的基本使用
基本使用步驟，第一步，引入相關的庫檔案，第二步，添加路由連接配接，第三步，添加路由填充位，第四步，定義路由元件，第五步，配置路由規則并建立路由執行個體，第六步，把路由挂載到vue根執行個體中。
router-link中，to表示目标路由的連結，repalce，當點選時會調用router.replace()而不是router.push()，導航後不會留下history記錄。
<router-link :to="{path: '/a'}" replace>router-link>
append，在目前路徑前添加基路徑。我們從/a導航到一個相對路徑da，如果沒有配置append，則路徑為/da，如果配了，則為/a/da
<router-link :to="{ path: '/da' }" append>router-link>
基本使用步驟，第一步引入相關的庫檔案
// 導入vue檔案，為全局window對象挂載vue構造函數