作者 |? 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

'}const?keji = {?template:?'

da2

'}const caijing = { template: '

da3

'}const yule = { template: '

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"

使用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構造函數

總結

以上是生活随笔為你收集整理的html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。