1、vue-router怎么重定向頁面?
答:路由中配置redirect屬性
2、vue-router怎么配置404頁面?
答:path: '*' 是對的 但是應該放在最后一個
3、切換路由時,需要保存草稿的功能,怎么實現呢?
答:beforeRouteLeave寫邏輯
4、vue-router路由有幾種模式?說說它們的區別?
答:hash模式:
1.url路徑會出現“#”號字符
2.hash值不包括在Http請求中,它是交由前端路由處理,所以改變hash值時不會刷新頁面,也不會向服務器發送請求,所以這也是單頁面應用的必備。
3.hash值的改變會觸發hashchange事件
4.當我們進行刷新操作,或者直接輸入瀏覽器地址時,hash路由會加載到地址欄對應的頁面,而history路由一般就404報錯了(刷新是網絡請求,沒有后端准備時會報錯)。
history模式:
1.history運用了瀏覽器的歷史記錄棧,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它們提供了對歷史記錄進行修改的功能,不過在進行修改時,雖然改變了當前的URL,但是瀏覽器不會馬上向后端發送請求。
2.history的這種模式需要后台配置支持。比如:當我們進行項目的主頁的時候,一切正常,可以訪問,但是當我們刷新頁面或者直接訪問路徑的時候就會返回404,那是因為在history模式下,只是動態的通過js操作window.history來改變瀏覽器地址欄里的路徑,並沒有發起http請求,但是當我直接在瀏覽器里輸入這個地址的時候,就一定要對服務器發起http請求,但是這個目標在服務器上又不存在,所以會返回404
3.hash路由支持低版本的瀏覽器,而history路由是HTML5新增的API。
5、vue-router有哪幾種導航鈎子( 導航守衛 )?
答:https://www.jianshu.com/p/5528c30f866b
答:vue-router插件的其中一個組件, 用於跳轉路由, 類似於a標簽, 它一般也會渲染成a標簽, 但是可以通過tag來變更默認渲染元素, 通過to來跳轉;demo
7、vue-router如何響應路由參數的變化?
答:1、使用 watch 監聽 2、向 router-view 組件中添加 key <router-view :key="$route.fullPath"></router-view> $route.fullPath 是完成后解析的URL,包含其查詢參數信息和hash完整路徑
8、你有看過vue-router的源碼嗎?說說看
答:https://www.cnblogs.com/caizhenbo/p/7297730.html
9、切換到新路由時,頁面要滾動到頂部或保持原先的滾動位置怎么做呢?
答:使用scrollBehavior demo
10、在什么場景下會用到嵌套路由?
答:在頁面點擊不同的選項卡切換不同的路由來展示不同的內容時
11、如何獲取路由傳過來的參數?
答:如果使用query方式傳入的參數使用this.$route.query 接收
如果使用params方式傳入的參數使用this.$router.params接收
12、說說active-class是哪個組件的屬性?
答:router-link
13、在vue組件中怎么獲取到當前的路由信息?
答:this.$route
14、vur-router怎么重定向?
答:redirect 動態的話在回調里面寫邏輯判斷
15、怎樣動態加載路由?
答:vue-router的addRoutes方法
16、怎么實現路由懶加載呢?
答:一般都用箭頭函數的方法 component:()=>import('組件路徑')
17、如果讓你從零開始寫一個vue路由,說說你的思路
答:創建完頁面后,在router.js里創建一個路徑,(一般剛創建項目時會有Home和About的示例,我都是直接復制一下他們的路由然后再改成自己的),然后在對應的頁面中引用
18、說說vue-router完整的導航解析流程是什么?
答:1.導航被觸發;2.在失活的組件里調用beforeRouteLeave守衛;3.調用全局beforeEach守衛;4.在復用組件里調用beforeRouteUpdate守衛;5.調用路由配置里的beforeEnter守衛;6.解析異步路由組件;7.在被激活的組件里調用beforeRouteEnter守衛;8.調用全局beforeResolve守衛;9.導航被確認;10..調用全局的afterEach鈎子;11.DOM更新;12.用創建好的實例調用beforeRouteEnter守衛中傳給next的回調函數。
19、路由之間是怎么跳轉的?有哪些方式?
答:組件導航 router-link router-view 編程導航router.pushr outer.replace router.go
20、如果vue-router使用history模式,部署時要注意什么?
答:服務器的404頁面需要重定向到index.html
21、route和router有什么區別?
答:router是new vueRouter的實例,route是當前路由的對象
22、vue-router鈎子函數有哪些?都有哪些參數?
答:全局的:beforeEach、beforeResolve、afterEach
路由的:beforeEnter
組件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
參數:to、from、next;正對不同的鈎子函數參數有所差異。
23、vue-router是用來做什么的?它有哪些組件?
答:vue-router路由,通俗來講主要是來實現頁面的跳轉,通過設置不同的path,向服務器發送的不同的請求,獲取不同的資源。
主要組件:router-view、router-link
