面試題
1. 路由之間是怎么跳轉的？有哪些方式
1、<router-link to="需要跳轉到頁面的路徑">
2、this.$router.push()跳轉到指定的url，並在history中添加記錄，點擊回退返回到上一個頁面
3、this.$router.replace()跳轉到指定的url，但是history中不會添加記錄，點擊回退到上上個頁面
4、this.$touter.go(n)向前或者后跳轉n個頁面，n可以是正數也可以是負數
2. vue-router怎么配置路由
在vue中配置路由分為5個步驟，分別是：
-
引入vue-router.js
-
配置路由path和組件, 和生成路由對象
-
把路由對象配置到new Vue中router選項下
-
頁面使用<router-view></router-view> 承載路由
-
<router-link to="要跳轉的路徑"></router-link> 設置路由導航(聲明式導航方式/編程式跳轉)
3. vue-router的鈎子函數都有哪些
關於vue-router中的鈎子函數主要分為3類
全局鈎子函數要包含beforeEach
beforeEach函數有三個參數,分別是:
to:router即將進入的路由對象 from:當前導航即將離開的路由 next:function,進行管道中的一個鈎子，如果執行完了,則導航的狀態就是 confirmed （確認的）否則為false,終止導航。
單獨路由獨享組件
beforeEnter,
組件內鈎子
beforeRouterEnter， beforeRouterUpdate, beforeRouterLeave
4. 路由傳值的方式有哪幾種
Vue-router傳參可以分為兩大類，分別是編程式的導航 router.push和聲明式的導航
router.push
字符串：直接傳遞路由地址，但是不能傳遞參數
this.$router.push("home")
對象：
命名路由 這種方式傳遞參數，目標頁面刷新會報錯 - name+params
this.$router.push({name:"news",params:{userId:123})
查詢參數 和path配對的是query
this.$router.push({path:"/news',query:{uersId:123})
接收參數 this.$route.query
聲明式導航
字符串 <router-link to:"news"></router-link>
命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>
還可以to="/path/值" - 需要提前在路由 規則里值 /path/:key
查詢參數 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>
還可以to="/path?key=value
5. 怎么定義vue-router的動態路由?怎么獲取傳過來的動態參數?
動態路由指的就是path路徑上傳智, 前提需要路由規則了提前配置/path/:key名, 可以寫多個用/隔開, 獲取使用$route.params.key名來提取對應用路徑傳過來的值
6. Vue的路由實現模式：hash模式和history模式（必會）
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
history模式：history采用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更
7. 請說出路由配置項常用的屬性及作用（必會）
路由配置參數：
path : 跳轉路徑 component : 路徑相對於的組件 name:命名路由 children:子路由的配置參數(路由嵌套) props:路由解耦 redirect : 重定向路由
8. 編程式導航使用的方法以及常用的方法（必會）
路由跳轉 ： this.$router.push() 路由替換 : this.$router.replace() 后退： this.$router.back() 前進 ：this.$router.forward()
9. Vue如何去除URL中的#（必會）
vue-router 默認使用 hash 模式，所以在路由加載的時候，項目中的 URL 會自帶 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一種模式 history：new Router ({ mode : 'history', routes: [ ]})
需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 “404” 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 “index.html” 頁面。
10. 說一下你在vue中踩過的坑（必會）
1、第一個是給對象添加屬性的時候，直接通過給data里面的對象添加屬性然后賦值，新添加的屬性不是響應式的
【解決辦法】通過Vue.set(對象，屬性，值)這種方式就可以達到，對象新添加的屬性是響應式的
2、 在created操作dom的時候，是報錯的，獲取不到dom，這個時候實例vue實例沒有掛載
【解決辦法】通過：Vue.nextTick(回調函數進行獲取)
11. $route和$router的區別？
$route是路由信息對象，包括‘path，hash，query，fullPath，matched，name’等路由信息參數； $router是路由實例對象，包括了路由的跳轉方法，實例對象等