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 的核心深度整合，讓構建單頁面應用變得易如反掌。
• <router-link>和<router-view>和<keep-alive>

3. active-class 是哪個元件的屬性？

active-class是router-link終端屬性，用來做選中樣式的切換，當router-link標籤被點選時將會應用這個樣式

4. 怎麼定義vue-router的動態路由？怎麼獲取傳過來的值？

• 動態路由的建立，主要是使用path屬性過程中，使用動態路徑引數，以冒號開頭，如下：

{
  path: '/details/:id'
  name: 'Details'
  components: Details
}
 

訪問details目錄下的所有檔案，如果details/a，details/b等，都會對映到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

9. vue-router的兩種模式

• 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')
        }
  ]
})