作者 | 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中。
// 引入vue
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [ //配置路由
{
path: '/', //鏈接路徑
name: 'HelloWorld', //路由名稱
component: HelloWorld //對應組件模板
}
]
})
使用：main.js中
// 引入vue
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關閉生產模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})
頁面跳轉：
<router-link to="/">[顯示字段]</router-link>
<router-link to="/hello">hello</router-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值
}
簡單的實例：
<div id="app">
// 切換組件的超連接
<a href="#/zhuye">主頁</a>
<a href="#/keji>科技</a>
<a href="#/caijing>財經</a>
<a href="#/yule">娛樂</a>
// :is屬性指定的組件名稱，把對應的組件渲染到component標簽所在位置
// 可以把component標簽當前組件的占位符
<component :is="keji"></component>
</div>
定義四個組件
const zhuye = {
template； '<h1>da1</h1>'
}
const keji = {
template: '<h1>da2</h1>'
}
const caijing = {
template: '<h1>da3</h1>'
}
const yule = {
template: '<h1>da4</h1>'
}
注冊組件
const vm = new Vue({
el: '#app',
data: {},
// 注冊組件
components: {
zhuye,
keji,
caijing,
yule
}
})
動態切換
<component :is="comName"></component>
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構造函數
<script src="./lib/vuexxxx.js"></script>
// 導入vue-router文件，為全局window對象掛載vuerouter構造函數
<script src="./lib/vue-routerxxx.js"></script>
第二步添加路由鏈接
// router-link是vue中提供的標簽，默認會被渲染為a標簽
// to屬性默認會被渲染成為 href 屬性
// to 屬性的默認會被渲染為#開頭的hash地址
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
第三步添加路由填充位
// 路由填充位，叫做路由占位符
// 將來要通過路由規則匹配到的組件
// 會被渲染到router-view所在的位置
<router-view></router-view>
第四步添加定義路由組件，如果有兩個路由，添加兩個組件
var User = {
template: '<div>user</div>'
}
var Register = {
template: '<div>register</div>'
}
第五步，最重要，配置路由規則和創建路由實例
// 創建路由實例對象
var router = new VueRouter({
// routes 是路由規則數組
routers: {
// 每個路由規則都是一個配置對象，其中至少包含path和compontent兩個屬性
// path表示當前路由規則匹配的hash地址
{path: '/user', component: User},
{path: '/register', component: Register}
}}
第六步，把路由掛載到vue根實例中
new Vue({
el: '#app',
//為了能夠讓路由規則生效，必須把路由對象掛載到vue實例對象上
router
});
路由重定向
路由重定向值的是，用戶在訪問地址a的時候，強制用戶跳轉到地址c，從而展示特定的組件頁面，通過路由規則的redirect屬性，指定一個新的路由地址，可以方便地設置路由的重定向。
var router = new VueRouter({
routers: [
// 其中，path表示需要被重定向的原地址，redirect表示將要被重定向的新地址
{path；'/', redirect: '/user'},
{path:'/user', component: User},
{path:'/register', component:Register}
}
})
vue-router嵌套路由
嵌套路由，是什么呢？是父級別的路由下有子級別的路由。點擊父級路由鏈接顯示模板內容，模板內容又有子級別的路由鏈接，點擊子級別的路由顯示子級別的模板內容。
第一步，創建父級路由組件模板，父級路由鏈接和父級組件路由的填充位
<p>
<router-link to="/xxx">xxx</router-link>
<router-link to="/xx">xx</router-link>
</p>
<div>
// 控制組件的顯示位置
<router-view></router-view>
</div>
第二步，創建子級別的路由模板，子級別路由鏈接，子級別路由填充位
const Register = {
template；`<div>
<h1>dada</h1>
<router-link to="/register/xxx">xxx</router-link>
<router-link to="/register/xx">xx</router-link>
// 子路由填充位置
<router-view/>
</div>`
}
第三步，嵌套路由的配置，父級路由通過children屬性配置子級路由
const router = new VueRouter ({
routes: [
{path: '/user', component: User },
{ path: '/reg',
component: Register,
// 通過children屬性，為/register添加子路由規則
children: [
{path: '/reg/p1', component: p1},
{path: '/reg/p2', component: p2}
]
}
]
})
創建子路由鏈接，子路由占位符的時候，別忘記了要寫子組件的代碼。
comst p1 = {
template: '<h1>da</h1>'
}
vue-router動態路由匹配
什么是動態路由匹配，為啥要動態路由匹配？
場景如下
<router-link to="/user/1">da1</router-link>
<router-link to="/user/2">da2</router-link>
<router-link to="/user/3">da3</router-link>
{ path: '/user/1, component: user}
{ path: '/user/2, component: user}
{ path: '/user/3, component: user}
動態參數， :id
var router = new VueRouter({
routes: [
// 動態路徑參數 冒號開頭
{path: '/user/:id', component: User }
}
})
const User = {
// 路由組件中通過 $route.params獲取路由參數
template: '<div>U {{ $route.params.id }} </div>'
}
路由組件傳遞參數props，將props的值設置為布爾類型
const router = new VueRouter({
routes: [
// 如果props被設置為true, route.params將會被設置為組件屬性
{path: '/user/:id', component: User, params: true }
]
})
const User = {
props: ['id'], // 使用props接收路由參數
template: '<div>da {{id}} </div>' // 使用路由參數
}
props的值可以為對象類型的參數，傳遞動態參數
const router = new VueRouter({
routes: [
// 如果props是一個對象，它會被按原樣設置為組件屬性
{ path: '/user/:id', component: User, props: { name: 'dada', age: 12 }}
]
})
const User = {
props: ['name','age'],
template: `<div> {{name}} + {{age}} </div>`
}
props的值為函數類型的參數
const router = new VueRouter({
routes: {
// 如果props是一個函數，則這個函數接收 route 對象為自己的形參
{ path: '/user/:id',
component: Use,
props: route => {{ name: 'dada', age: 12, id: route.params.id }}}
}
})
const User = {
props: {'name', 'age', 'id'},
template: `<div> {{name}} + {{ age }} + {{id}} </div>`
}
什么叫做命名路由
路由的name可以指定命名名稱，不用寫path。命名路由的配置規則
// 路由導航
const router = new VueRouter({
routes: [
{
path: '/user/id',
name: 'user',
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實現導航的方式，如網頁中的location.href。
// 編程式導航
this.$router.push('hash地址'
this.$router.go(n)
const User = {
template: '<div><button @click="goButton">跳轉</button></div>',
methods: {
goButton: function(){
// 用編程的方式控制路由跳轉
this.$router.push('/register');
}
}
}
const da = {
template: `<div>
<button @click="goBack">后退</button>
</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時，頁面不會重新加載。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
命名視圖
過渡效果
參考鏈接
https://router.vuejs.org/zh/
最后
歡迎加我微信(xiaoda0423)，拉你進技術群，長期交流學習...
歡迎關注「達達前端」,認真學前端，做個有專業的技術人...
在博客平台里，未來的路還很長，也希望自己以后的文章大家能多多支持，多多批評指正，我們一起進步，一起走花路。
非常感謝讀者能看到這里，如果這個文章寫得還不錯，覺得「達達」我有點東西的話，覺得我能夠堅持的學習，覺得此人可以交朋友的話， 求點贊，求關注，求分享，對暖男我來說真的
非常有用！！！
推薦閱讀：
2019年的每一天日更只為等待她的出現，好好過余生，慶余年 | 掘金年度征文
一篇文章帶你了解JavaScript中的變量，作用域和內存問題
一篇文章帶你了解JavaScript中的語法，數據類型，流程控制語句以及函數
感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫作最大的動力。
意見反饋
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
這是一個有質量，有態度的公眾號
點關注，有好運
