vue路由面試題
1. mvvm框架是什么？
mvvm即Model-View-ViewModel，mvvm的設計原理是基於mvc的
MVVM是Model-View-ViewModel的縮寫，Model代表數據模型負責業務邏輯和數據封裝，View代表UI組件負責界面和顯示，ViewModel監聽模型數據的改變和控制視圖行為，處理用戶交互，簡單來說就是通過雙向數據綁定把View層和Model層連接起來。在MVVM架構下，View和Model沒有直接聯系，而是通過ViewModel進行交互，我們只關注業務邏輯，不需要手動操作DOM，不需要關注View和Model的同步工作
2. vue-router是什么？有哪些組件？
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
3. active-class 是哪個組件的屬性？
active-class是router-link終端屬性，用來做選中樣式的切換，當router-link標簽被點擊時將會應用這個樣式
4. 怎么定義vue-router的動態路由？怎么獲取傳過來的值？
動態路由的創建，主要是使用path屬性過程中，使用動態路徑參數，以冒號開頭，如下：
{
path: '/details/:id'
name: 'Details'
components: Details
}
當匹配到/details下的路由時，參數值會被設置到this.$route.params下，所以通過這個屬性可以獲取動態參數
console.log(this.$route.params.id)
5. vue-router有哪幾種導航鈎子？
全局前置守衛
const router = new VueRouter({})
router.beforeEach((to, from, next) = {
// to do somethings
})
to:Route,代表要進入的目標，它是一個路由對象。
from:Route,代表當前正要離開的路由，也是一個路由對象
next:Function,必須需要調用的方法，具體的執行效果則依賴next方法調用的參數
next():進入管道中的下一個鈎子，如果全部的鈎子執行完了，則導航的狀態就是comfirmed（確認的）
next(false):終端當前的導航。如瀏覽器URL改變，那么URL會充值到from路由對應的地址。
next('/')||next({path:'/'}):跳轉到一個不同的地址。當前導航終端，執行新的導航。
- next 方法必須調用，否則鈎子函數無法resolved
全局后置鈎子
router.afterEach((to, from) = {
// to do somethings
})
后置鈎子並沒有next函數，也不會改變導航本身。
路由獨享鈎子
beforEnter
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home，
beforeEnter: (to, from, next) = {
// to do somethings
// 參數與全局守衛參數一樣
}
}
]
})
組件內導航鈎子
const Home = {
template: `<div></div>`,
beforeRouteEnter(to, from, next){
// 在渲染該組件的對應路由被 confirm 前調用
// 不能獲取組件實例 ‘this’，因為當守衛執行前，組件實例還沒被創建
},
beforeRouteUpdate(to, from, next){
// 在當前路由改變，但是該組件被復用時調用
// 例：對於一個動態參數的路徑 /home/:id,在/home/1 和 /home/2 之間跳轉的時候
// 由於會渲染同樣的 Home 組件，因此組件實例會被復用，而這個鈎子就會在這個情況下被調用。
// 可以訪問組件實例 'this'
},
beforeRouteLeave(to, from, next){
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 'this'
}
}
beforeRouterEnter不能訪問this，因為守衛在導航確認前被調用，因此新組建還沒有被創建,可以通過傳一個回調給 next 來訪問組件實例。在導航被確認的時候執行回調，並把實例作為回調的方法參數。
const Home = {
template: `<div></div>`,
beforeRouteEnter(to, from, next){
next( vm = {
// 通過 'vm' 訪問組件實例
})
}
}
6. $route和 $router的區別是什么？
router為VueRouter的實例，是一個全局路由對象，包含了路由跳轉的方法、鈎子函數等。
route 是路由信息對象||跳轉的路由對象，每一個路由都會有一個route對象，是一個局部對象，包含path,params,hash,query,fullPath,matched,name等路由信息參數。
7. vue-router響應路由參數的變化
用watch 檢測
// 監聽當前路由發生變化的時候執行
watch: {
$route(to, from){
console.log(to.path)
// 對路由變化做出響應
}
}
組件內導航鈎子函數
beforeRouteUpdate(to, from, next){
// to do somethings
}
8. vue-router 傳參
Params
只能使用name，不能使用path
參數不會顯示在路徑上
瀏覽器強制刷新參數會被清空，
// 傳遞參數
this.$router.push({
name: Home，
params: {
number: 1 ,
code: '999'
}
})
// 接收參數
const p = this.$route.params
Query:
參數會顯示在路徑上，刷新不會被清空
name 可以使用path路徑
// 傳遞參數
this.$router.push({
name: Home，
query: {
number: 1 ,
code: '999'
}
})
// 接收參數
const q = this.$route.query
hash
原理是onhashchage事件，可以在window對象上監聽這個事件
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL)
let hash = location.hash.slice(1)
}
history
利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
需要后台配置支持。如果刷新時，服務器沒有響應響應的資源，會刷出404，
10. vue-router實現路由懶加載（動態加載路由）
把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問時才加載對應的組件即為路由的懶加載，可以加快項目的加載速度，提高效率
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home'，
component:() = import('../views/home')
}
]
})