目錄
引言：該篇主要講的是關於vue-router的原理以及使用等問題，以及面試中常被問到的幾個點，有部分還未整理后續會繼續更新；
1.vue-router 是什么?
Vue-router就是WebApp的鏈接路徑管理系統。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的，適合用於構建單頁面應用
在之前常用的是用a標簽進行跳轉，現在做的是單頁面應用，所以必須使用v-router進行管理
2.如何使用v-router?
1. 下載
cnpm i vue-router -S
2.在index.js中引入路由的核心模塊
import VueRouter from 'vue-router'
3.注冊路由插件
Vue.use(VueRouter)
4.創建路由對象並且配置路徑
這里有兩種情況，一級路徑 例如
"/film"可以如下寫法即可，表示跳轉/cinema頁面渲染Cinema組件
注意：別忘了引入該組件
const routes = [
{
path: '/cinema',
component: Cinema
}
]
嵌套路由：
這種情況下不會把cinema的組件內容覆蓋 可以實現單組件切換內容 跟選項卡效果差不多
二級路徑："/film/nowplaying"
{
path: '/film',
component: Film,
children: [{
path: '/film/nowplaying',
component: Nowplaying,
},
{
path: '/film/comingsong',
component: Comingsong,
}
]
},
5.將路由對象傳遞給Vue實例
const router = new VueRouter({
routes: routes
})
export default router
6.配置好之后，需要在顯示留坑，否則無法顯示在頁面上
<router-view></router-view>
完整代碼寫法如下:
//index.js文件中引入
// 路由的核心模塊
import VueRouter from 'vue-router'
import Cinema from '@/views/Cinema'
// 必須要加 注冊路由插件
Vue.use(VueRouter)
// 路由映射表
const routes = [
{
path: '/cinema',
component: Cinema
},
]
const router = new VueRouter({
routes: routes
})
export default router
main.js
import router from './router'
//new Vue 啟動
new Vue({
el: '#app',
//讓vue知道我們的路由規則
router: router, //可以簡寫router
render: c => c(App),
})
3.vue-router跳轉和傳參
1.用name傳遞參數
在路由文件中配置name屬性，組件中用 $router.name來接受
{
path: '/cinema',
name：'cinema'
component: Cinema
}
<!--獲取-->
<p>{{ $router.name}}</p>
2.通過
<!--需要在路由映射中提前配置好-->
{
path: '/cinema',
component: Cinema
}
<router-link :to="{path:'/cinema',params:{key:value}}">666</router-link>
<!--獲取-->
{{$route.params.key}}
3.通過url地址欄傳參數
{
path: '/detail',
component: Detail
},
this.$router.push({path: '/detail', query: {data: datail}}
<!--獲取-->
{{this.$route.query.data}}
4.vue-router實現的原理
SPA(single page application):單一頁面應用程序，只有一個完整的頁面；它在加載頁面時，不會加載整個頁面，而是只更新某個指定的容器中內容。 單頁面應用(SPA)的核心之一是: 更新視圖而不重新請求頁面 ;vue-router在實現單頁面前端路由時，提供了兩種模式,根據mode參數來決定采用哪一種方式
兩種模式
1、Hash模式：
單頁面應用：頁面跳轉是無刷新的，但是url 每次變化的時候，都會造成頁面的刷新,所以為了解決通過hash來實現路由，在改變 url的情況下，保證頁面的不刷新
url hash 類似於
http://www.xxx.com/#/film
這種 #。后面 hash 值的變化，並不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發hashchange 這個事件，通過這個事件我們就可以知道 hash 值發生了哪些變化。然后我們便可以監聽hashchange來實現更新頁面部分內容的操作：
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)
2、History模式：
history 模式時，URL 就像正常的 url，只需要在配置路由規則時，加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面
const router = new VueRouter({
mode: 'history',
routes: [...]
})
注意:還需要后台配置支持，如果沒有正確配置會返回404；服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
5.vue-router 有哪幾種導航鈎子?
解釋:vue-router導航鈎子 主要用來作用是攔截導航，讓他完成跳轉或取消
1. 全局導航鈎子
全局導航鈎子主要有兩種鈎子：前置守衛、后置鈎子，
注冊一個全局前置守衛：
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
//to: Route，代表要進入的目標，它是一個路由對象
//from: Route，代表當前正要離開的路由，同樣也是一個路由對象
//next: Function，這是一個必須需要調用的方法，而具體的執行效果則依賴 next 方法調用的參數
2. 路由獨享的鈎子
單個路由獨享的導航鈎子，它是在路由配置上直接進行定義的
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
3. 組建內的導航鈎子
組件內的導航鈎子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內部直接進行定義的
const File = {
template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在當前路由改變，但是依然渲染該組件是調用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 導航離開該組件的對應路由時被調用
}
}
6.$route 和 $router 的區別
$route :為當前router跳轉對象里面可以獲取name、path、query、params等
\(router :為VueRouter實例，想要導航到不同URL，則使用\)router.push方法
返回上一個history也是使用$router.go方法
7.vue-router響應路由參數的變化
例如從/user/foo導航到/user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味着組件的生命周期鈎子不會再被調用
路由參數的變化作出響應可以用以下方法：
1.watch監聽,當路由發生變化的時候執行
watch:{
$route(to,from){
console.log(to.path);
// 對路由變化作出響應...
}
},
2.在父組件的router-view上加個key
<router-view :key="$route.fullPath"></router-view>
8.vue-router實現路由懶加載（ 動態加載路由 ）
const Foo = () => import('./Foo.vue')
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
//有時候想把某個路由下的所有組件都打包在同一個異步快中，需要使用命名chunk，一個特殊的注釋語法來提供chunk name（webpack>2.4）
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')