歡迎加我技術交流QQ群 ：811956471
一、vue-router是什么
通俗的說，vue-router就是WebApp的鏈接路徑管理系統，本質 就是建立起url和頁面之間的映射關系。而舍棄了一般描點連接、用a鏈接去實現頁面跳轉的方法。
二、vue-router模式
1、Hash模式：
vue-router 默認 是hash 模式 ，當 URL 改變時，頁面不會重新加載。 hash（#）是URL 的錨點，改變#后的部分，瀏覽器只會滾動到相應位置，不會重新加載網頁。
2、History模式：
hash模式會在url中自帶#，可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: 'history'",
const router = new VueRouter({
mode: 'history',
routes: [...]
})
注意：種模式要玩好，還需要后臺配置支持
三、解決沒有匹配到頁面出現404問題
//方法一：在路由規則如下代碼，使其直接跳轉到首頁
{path: "*", redirect: "/"}
//方法二：做一個錯誤處理組件，跳轉到這里
{ path:'*', component:Error}
四、vue-router使用方式
1.安裝 npm i vue-router -S
2.在main.js中引入 import VueRouter from 'vue-router';
3:引用Vue.use(VueRouter);
4.在 router文件中index.js 中 創建路由對象并配置路由規則 let router = new VueRouter({routes:[{path:'/home',component:Home}]});
五、$route（路由） 和$router（路由器） 的區別
1.$route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數、就是配置的一堆路由規則、路徑。
2.$router 是“路由實例”對象，即使用 new VueRouter創建的實例，包括了路由的跳轉方法，鉤子函數等，一堆路由規則、路徑組成了路由器。
六、編程式導航(說白了就是用腳本業務邏輯實現頁面跳轉)
1.比如需要用程序控制跳轉有以下方法：
（1）、字符串匹配跳轉
html:
<button @click="gpto_foo">Go to Foo</button>
js:
methods: {
gpto_foo:function () {
this.$router.push('foo')//親測 這種不支持name匹配, 這里的字符串是路徑path，不是router配置里的name
}
}
//這種方法如果需要傳遞參數：
//步驟一：
{
path: "/Foo/:id",
name: 'Fooa',
component: Foo,
},
//步驟二：
this.$router.push('Foo/78')
//或者：
this.$router.push('Foo/'+this.userid)
（2）、對象方法
//第一 ：router配置里的name匹配跳轉
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ name: 'Fooa', params: { userId: "77" }})
//第二：router配置里的path匹配跳轉
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ path: 'Foo', query: { userId: this.userid }})
七、導航守衛
簡介：主要是在導航跳轉的時候做一些操作，比如可以做登錄的攔截，而鉤子函數根據其生效的范圍可以分為 ：全局路由守衛、路由獨享衛和組件內路由衛。
（1）、全局路由守衛：beforeEach、afterEach
-- 全局前置守衛beforeEach：
//在所有路由跳轉之前、初始化執行
router.beforeEach((to, from, next) => {
const isLogin='判斷用戶是否登錄的邏輯代碼';
if (to.meta.auth&&isLogin){
next()
}else{
next({ name: 'Login' })
}
// 如果該路由需要登錄后訪問，且用戶未登錄跳轉登錄頁面
})
-- 全局后置守衛afterEach
//在所有路由初始化、跳轉之后執行
router.afterEach((to, from) => {
document.title=to.meta.title//設置每個頁面的頁面標題
})
（2）、路由獨享守衛：beforeEnter，沒有后置守衛
//用法同全局路由守衛：beforeEach
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
（3）、組件內的守衛：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。這三個路由是在組件（頁面中）使用。
//通過路由匹配規則，進入組件時調用
beforeRouteEnter(to, from, next) {
// 沒有 `this`， 因為當守衛執行前，組件實例還沒被創建
const isLogin='判斷用戶是否登錄的邏輯代碼';
if (to.meta.auth&&isLogin){
next()
}else{
next({ name: 'Login' })
}
// 如果該路由需要登錄后訪問，且用戶未登錄跳轉登錄頁面
},
// 在當前路由改變，但是該組件被復用時調用
beforeRouteUpdate(to, from, next) {
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
},
// 通過路由匹配規則，離開組件時調用，一般用于提示用戶是否離開當前頁面，或者清除當前組件定時器等
beforeRouteLeave(to, from, next) {
// 可以訪問組件實例 `this`
}
