00 Vue-Router簡介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌，路由模塊的本質，就是建立起url和頁面之間的映射關係。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基於組件的路由配置
- 路由參數、查詢、通配符
- 基於 Vue.js 過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
01 SPA的基本概念和工作原理
SPA：single page application 單一頁面應用程序，即應用只有一個完整的頁面。它在加載頁面時，不會加載整個頁面，而是隻更新某個指定的容器中內容，比如Gmail、移動的webApp。
工作原理：
- 解析地址欄，包括完整的頁面地址、路由地址。
- 根據路由地址從路由詞典中找到真正的要加載的頁面。
- 發起ajax請求，請求要加載的頁面。
- 向指定的容器中，插入加載來的頁面。
02 路由模塊的基本使用
專業術語：
router路由器
route路由
routes 路由數組（路由詞典）
1.引入vue.js vue-router.js。
2.指定一個容器。
3.創建業務所需要用到的組件類。
var MyLogin = Vue.component()
4.配置路由詞典。
const myRoutes = [
{path:'',component:MyLogin},
{path:'/login',component:MyLogin}
];
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter
})
5.測試
修改地址欄中的路由地址，測試看加載的組件是否正確。
注意事項：
1.先引入vue，再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes 路由數組 []
router 路由器:按照指定的路由規則去訪問對應的組件 new VueRouter
03 使用路由模塊來實現頁面跳轉的方式
方式1：直接修改地址欄
方式2：js
this.$router.push(‘路由地址’);
方式3：link標籤
04 完成參數的傳遞
在頁面之間跳轉的時候，在有些場景下，需要同時指定參數
1.明確發送方和接收方
list --20--> detail
發送方是一個list，用戶點擊id，跳轉到detail
2.配置接收方的路由地址
路由詞典：/detail --> /detail/:index
js通過this.$route.params.index訪問參數。
3.發送
或
this.$router.push('/detail/20')
05 路由嵌套
在一個路由中，path對應一個component，如果這個component需要根據不同的url再加載其他的component，稱之為路由的嵌套
舉例：比如A組件現在需要根據不同的url，加載B組件或者C組件
1.給A組件指定一個容器
2.配置路由詞典
{
path:'/a',
component:A,
children:[
{path:'/b',component:B}
]
}
需求：現在有兩個組件，分別是login/mail,建立SPA。在此基礎上，希望mail組件 嵌套inbox/outbox/draft
補充：在設置子路由，路由匹配規則依然是適用的，只不過路由地址為空和異常，要攜帶父組件的路由地址
/mail /mail/draft
06 異域面試題
1.active-class是哪個組件的屬性？
vue-router模塊的router-link組件。
2.嵌套路由怎麼定義？
在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。
//引入兩個組件
import home from "./home.vue"
import game from "./game.vue" //定義路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home組件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
3.怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。
使用router對象的params.id。
4.vue-router有哪幾種導航鉤子？
三種，
第一種：是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：組件內的鉤子
第三種：單獨路由獨享組件
5、vue-router是什麼？它有哪些組件？
vue用來寫路由的一個插件。組件包括router-link、router-view
6、(webpack)vue-cli構建的項目如何設置每個頁面的title？
在路由裡每個都添加一個meta
[{
path:'/login',
meta: {
title: '登錄頁面'
},
component:'login'
}]
鉤子函數：
在main.js中添加如下代碼
router.beforeEach((to, from, next) => {
window.document.title = to.meta.title;
next()
})
7、導航鉤子有哪些？它們有哪些參數？
導航鉤子有：
全局鉤子
beforeEach
當一個導航觸發時，全局前置鉤子按照創建順序調用。鉤子是異步解析執行，此時導航在所有鉤子 resolve 完之前一直處於等待中。
全局解析鉤子
beforeResolve
在導航被確認之前，同時在所有組件內鉤子和異步路由組件被解析之後，解析鉤子就被調用。
全局後置鉤子
afterEach
這些鉤子不會接受 next 函數也不會改變導航本身
路由獨享鉤子
beforeEnter
組件內鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
參數：
有to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種
完整的導航解析流程
- 導航被觸發。
- 在失活的組件裡調用離開鉤子。
- 調用全局的 beforeEach 鉤子。
- 在重用的組件裡調用 beforeRouteUpdate 鉤子 (2.2+)。
- 在路由配置裡調用 beforeEnter。
- 解析異步路由組件。
- 在被激活的組件裡調用 beforeRouteEnter。
- 調用全局的 beforeResolve 鉤子 (2.5+)。
- 導航被確認。
- 調用全局的 afterEach 鉤子。
- 觸發 DOM 更新。
- 用創建好的實例調用 beforeRouteEnter 鉤子中傳給 next 的回調函數。
8、vue項目中在使用vue-router切換頁面的時候滾動條怎樣自動滾動到頂部？
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在 HTML5 history 模式下可用。
當創建一個 Router 實例，你可以提供一個 scrollBehavior 方法：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
})
scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用。
這個方法返回滾動位置的對象信息，長這樣：
{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
如果返回一個 falsy 的值，或者是一個空對象，那麼不會發生滾動。
舉例：
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
對於所有路由導航，簡單地讓頁面滾動到頂部。
返回 savedPosition，在按下 後退/前進 按鈕時，就會像瀏覽器的原生表現那樣：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模擬『滾動到錨點』的行為：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
我們還可以利用路由元信息更細顆粒度地控制滾動。
routes: [
{ path: '/', component: Home, meta: { scrollToTop: true }},
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar, meta: { scrollToTop: true }}
]
完整的例子：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '
home' }const Foo = { template: '
foo' }const Bar = {
template: `
bar
Anchor
`
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
// savedPosition is only available for popstate navigations.
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
// check if any matched route config has meta that requires scrolling to top
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
scrollBehavior,
routes: [
{ path: '/', component: Home, meta: { scrollToTop: true }},
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar, meta: { scrollToTop: true }}
]
})
new Vue({
router,
template: `
Scroll Behavior
/
/foo
/bar
/bar#anchor
`
}).$mount('#app')
網友說還可以試試在main.js入口文件配合vue-router寫這個
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
閱讀更多 互聯網技能圖譜 的文章
