【面試需要-Vue全家桶】一文帶你看透Vue前端路由

2020 年 2 月 13 日
筆記

作者 | 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來安裝。

npminstallvue-router–save

vue-cli構建項目。router/index.js中。

// 引入vueimportVuefrom'vue'// 引入vue-router路由依賴importRouterfrom'vue-router'// 引入頁面組件，命名為HelloWorldimportHelloWorldfrom'@/components/HelloWorld'// Vue全局使用RouterVue.use(Router)// 定義路由配置exportdefaultnewRouter({routes: [//配置路由{path:'/',//鏈接路徑name:'HelloWorld',//路由名稱component: HelloWorld//對應組件模板} ]})

使用：main.js中

// 引入vueimportVuefrom'vue'// 引入根組件importAppfrom'./App'// 引入路由配置importrouterfrom'./router'// 關閉生產模式下給出的提示Vue.config.productionTip =false// 定義實例newVue({el:'#app', router,// 注入框架中components: { App },template:'<App/>'})

頁面跳轉：

<router-link to="/">[顯示欄位]</router-link>

<router-link to="/hello">hello</router-link>

this.$router.push('/xxx')

export default {

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標籤當前組件的佔位符

</div>

定義四個組件

constzhuye = { template；'<h1>da1</h1>'}constkeji = {template:'<h1>da2</h1>'}constcaijing = {template:'<h1>da3</h1>'}constyule = {template:'<h1>da4</h1>'}

註冊組件

constvm =newVue({el:'#app',data: {},// 註冊組件components: { zhuye, keji, caijing, yule } })

動態切換

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構造函數// 導入vue-router文件，為全局window對象掛載vuerouter構造函數

第二步添加路由鏈接

// router-link是vue中提供的標籤，默認會被渲染為a標籤

// to屬性默認會被渲染成為 href 屬性

// to 屬性的默認會被渲染為#開頭的hash地址

<router-link to="/user">User</router-link>

<router-link to="/register">Register</router-link>

第三步添加路由填充位

// 路由填充位，叫做路由佔位符// 將來要通過路由規則匹配到的組件// 會被渲染到router-view所在的位置

第四步添加定義路由組件，如果有兩個路由，添加兩個組件

varUser = {template:'<div>user</div>'}varRegister = {template:'<div>register</div>'}

第五步，最重要，配置路由規則和創建路由實例

// 創建路由實例對象varrouter =newVueRouter({// routes 是路由規則數組routers: {// 每個路由規則都是一個配置對象，其中至少包含path和compontent兩個屬性// path表示當前路由規則匹配的hash地址{path:'/user',component: User}, {path:'/register',component: Register}}}

第六步，把路由掛載到vue根實例中

newVue({el:'#app',//為了能夠讓路由規則生效，必須把路由對象掛載到vue實例對象上router});

路由重定向

路由重定向值的是，用戶在訪問地址a的時候，強制用戶跳轉到地址c，從而展示特定的組件頁面，通過路由規則的redirect屬性，指定一個新的路由地址，可以方便地設置路由的重定向。

varrouter =newVueRouter({routers: [// 其中，path表示需要被重定向的原地址，redirect表示將要被重定向的新地址{path；'/',redirect:'/user'}, {path:'/user',component: User}, {path:'/register',component:Register} }})

vue-router嵌套路由

嵌套路由，是什麼呢？是父級別的路由下有子級別的路由。點擊父級路由鏈接顯示模板內容，模板內容又有子級別的路由鏈接，點擊子級別的路由顯示子級別的模板內容。

第一步，創建父級路由組件模板，父級路由鏈接和父級組件路由的填充位

xxx

<router-link to="/xx">xx</router-link>

</p>

<div>

// 控制組件的顯示位置

<router-view></router-view>

</div>

第二步，創建子級別的路由模板，子級別路由鏈接，子級別路由填充位

constRegister = { template；`<div>

<router-link to="/register/xxx">xxx</router-link>

<router-link to="/register/xx">xx</router-link>

// 子路由填充位置

<router-view/>

</div>`}

第三步，嵌套路由的配置，父級路由通過children屬性配置子級路由

constrouter =newVueRouter ({routes: [ {path:'/user',component: User }, {path:'/reg',component: Register,// 通過children屬性，為/register添加子路由規則children: [ {path:'/reg/p1',component: p1}, {path:'/reg/p2',component: p2} ] } ] })

創建子路由鏈接，子路由佔位符的時候，別忘記了要寫子組件的程式碼。

comst p1 = {

}

vue-router動態路由匹配

什麼是動態路由匹配，為啥要動態路由匹配？

場景如下

da1

<router-link to="/user/2">da2</router-link>da3

{ path: '/user/1, component: user}

{ path: '/user/2, component: user}

{ path: '/user/3, component: user}

動態參數， :id

varrouter =newVueRouter({routes: [// 動態路徑參數冒號開頭{path:'/user/:id',component: User } }})constUser = {// 路由組件中通過 $route.params獲取路由參數template:'<div>U {{ $route.params.id }} </div>'}

路由組件傳遞參數props，將props的值設置為布爾類型

constrouter =newVueRouter({routes: [// 如果props被設置為true, route.params將會被設置為組件屬性{path:'/user/:id',component: User,params:true} ]})constUser = {props: ['id'],// 使用props接收路由參數template:'<div>da {{id}} </div>'// 使用路由參數}

props的值可以為對象類型的參數，傳遞動態參數

constrouter =newVueRouter({routes: [// 如果props是一個對象，它會被按原樣設置為組件屬性{path:'/user/:id',component: User,props: {name:'dada',age:12}} ]})constUser = {props: ['name','age'],template:`<div> {{name}} + {{age}} </div>`}

props的值為函數類型的參數

constrouter =newVueRouter({routes: {// 如果props是一個函數，則這個函數接收 route 對象為自己的形參{path:'/user/:id',component: Use,props:route=>{{name:'dada',age:12,id: route.params.id }}} } })constUser = {props: {'name','age','id'},template:`<div> {{name}} + {{ age }} + {{id}} </div>`}

什麼叫做命名路由

路由的name可以指定命名名稱，不用寫path。命名路由的配置規則

// 路由導航

const router = new VueRouter({

routes: [

{

path: '/user/id',

component: User

}

]

})

<router-link :to="{name:'user', params: {id:1} }">dada</router-link>

router.push({name:'user', params: {id:1} }}

編程時導航，第一種，聲明式導航是通過點擊鏈接實現導航的方式，如網頁中的a標籤或是vue中router-link標籤；第二種，編程式導航通過JavaScript的形式api實現導航的方式，如網頁中的kk。

// 編程式導航this.$router.push('hash地址'this.$router.go(n)constUser = {template:'<div><button @click="goButton">跳轉</button></div>',methods: {goButton:function(){// 用編程的方式控制路由跳轉this.$router.push('/register'); } }}constda = {template:`<div>

</div>`methods: { goBack() {this.$router.go(-1) } } }

router.push()方法

router.push('/dada')

router.push( { path: '/dada' })

router.push( { name: '/dada', params； { id: 1 } })

router.push( { path: '/dada', query: {name:'dada'} })

案例，多多使用，路由的基礎語法，嵌套路由，路由的重定向，路由的傳參，編程式導航等。

vue-router默認為hash模式，使用url的hash來模擬一個完整url，當改變url時，頁面不會重新載入。

constrouter =newVueRouter({mode:'history',routes: […]})