10個關於路由vue-router的vuejs面試題（含答案解析）

本篇文章為大家介紹10個中關於路由vue-router的vuejs面試題。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

路由 vue-router 面試題

#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的同步工作。 （學習影片分享：vue影片教學）

2. vue-router是什麼？有哪些組件？

• Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓建立單頁面應用變得易如反掌。
• b988a8fd72e5e0e42afffd18f951b277和975b587bf85a482ea10b0a28848e78a4和7c9485ff8c3cba5ae9343ed63c2dc3f7

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 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 &#39;this&#39;
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 &#39;this&#39;
  }
}

• beforeRouterEnter不能存取this，因為守衛在導航確認前被調用，因此新組成還沒有被創建,可以透過傳一個回調給next 來存取元件實例。在導航被確認的時候執行回調，並把實例當作回調的方法參數。

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // 通过 &#39;vm&#39; 访问组件实例
    })
  }
}

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

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~

更多编程相关知识，请访问：编程视频！！

以上是10個關於路由vue-router的vuejs面試題（含答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！