vue-router
-
vue-router怎麼重定向頁面？
router文件配置redirect
-
vue-router怎麼配置404頁面？
路由裏配置一個path * 然後redirect 404 即可
-
切換路由時，需要保存草稿的功能，怎麼實現呢？
使用keep-live 不明白看這個 https://segmentfault.com/a/1190000011978825
-
vue-router路由有幾種模式？說說它們的區別？
hash和history
hash是 利用 onhashchange事件去處理頁面的 可以獲取當前和之前的頁面路徑 從而形成跳轉 也就是所謂的前端路由 這樣前端切換 也不會給後臺發送請求
window.onhashchange = function(event){
console.log(event);
}
history模式 是window.history對象上 有3個方法 back 後退 forward 前進 和 go 去某頁
然後配合 h5 新的api 針對history對象的 在切換地址的時候 不發送請求 從而實現了單頁 不過 刷新問題需要後臺配置 否則404
HTML5新增的API
A)history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄； data會在onpopstate事件觸發時作爲
參數傳遞過去；title爲頁面標題，當前所有瀏覽器都會 忽略此參數；url爲頁面地址，可選，缺省爲當前頁地址；
B)history.replaceState(data, title [, url]) ：更改當前的歷史記錄，參數同上；
C)history.state：用於存儲以上方法的data數據，不同瀏覽器的讀寫權限不一樣；
D)window.onpopstate：響應pushState或replaceState的調用；有了這幾個新的API，針對支持的瀏覽器，
-
vue-router有哪幾種導航鉤子（ 導航守衛 ）？
全局鉤子 beforeEach 和afterEach
單個路由鉤子 寫在路由裏的 beforeEnter
組件內鉤子
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在當前路由改變，但是依然渲染該組件是調用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 導航離開該組件的對應路由時被調用
}
全局解析守衛
router.beforeResolve 註冊一個全局守衛，和 router.beforeEach 類似，
鉤子流程
導航被觸發
在失活的組件裏調用離開守衛
調用全局的 beforeEach 守衛
在重用的組件裏調用 beforeRouteUpdate 守衛
在路由配置裏調用 beforEnter
解析異步路由組件
在被激活的組件裏調用 beforeRouteEnter
調用全局的 beforeResolve 守衛
導航被確認
調用全局的 afterEach 鉤子
觸發 DOM 更新
在創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數
-
說說你對router-link的瞭解
route-link上 處理 常用的to 是去跳轉頁面外 還有其他屬性
比如 replace 跳轉的同時 不會存到history裏
比如 append 是在當前路徑後繼續追加路徑
比如 tag是變幻標籤
比如event 是改變觸發事件
比如 active-class exact-active-class 是匹配後的class樣式 等等
地址 https://blog.csdn.net/qq_39327418/article/details/89946513
-
vue-router如何響應路由參數的變化？
看如何傳參 query 和params的2種方式傳參 一個在路徑上 一個隱式 隱式的刷新會丟失 用this.$route接參就行 this.$router是路由實例
-
你有看過vue-router的源碼嗎？說說看
https://www.cnblogs.com/caizhenbo/p/7297730.html
-
切換到新路由時，頁面要滾動到頂部或保持原先的滾動位置怎麼做呢？
路由守衛
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
或者 router 實例化的時候 有一個回調scrollBehavior 函數 返回 x0 y0即可
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
-
在什麼場景下會用到嵌套路由？
二級子菜單
-
如何獲取路由傳過來的參數？
query 和params 用this.$route這個對象
-
說說active-class是哪個組件的屬性？
router-link
-
在vue組件中怎麼獲取到當前的路由信息？
this.$router是路由實例 this.$route 是路由信息
-
vur-rounter怎麼重定向？
redirect
-
怎樣動態加載路由？
router的 addroutes方法
-
怎麼實現路由懶加載呢？
() => import('@/views/login/index')
-
路由之間是怎麼跳轉的？有哪些方式？
router-link js就是
this.$router.push
跳轉到指定url路徑，並想history棧中添加一個記錄，點擊後退會返回到上一個頁面
this.$router.replace
跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)
this.$router.go(n)
向前或者向後跳轉n個頁面，n可爲正整數或負整數
-
如果vue-router使用history模式，部署時要注意什麼？
刷新404
-
route和router有什麼區別？
一個是路由實例 一個是路由信