vue-router官方文檔
官方給的文檔很詳細跨扮，我從在我搭的框架實際應用上講述一下vue-router如何在項目中封裝并引用。
1示惊、概念簡介
引用官方的一句話
使用Vue + Vue Router創(chuàng)建單頁應用程序非常簡單好港。借助Vue.js，我們已經(jīng)在使用組件組成應用程序米罚。將Vue Router添加到混合中時钧汹，我們要做的只是將組件映射到路由，并讓Vue Router知道在何處渲染它們
個人理解
通常的html網(wǎng)頁录择，跳轉(zhuǎn)到另一個頁面都需要在瀏覽器中刷新一下拔莱，等待服務器響應將頁面?zhèn)骰貋硗虢担绻醒舆t，會有一段時間的空白塘秦，對用戶體驗效果不佳讼渊，于是，單頁面應用應運而生尊剔，因為在一開始就加載出所有頁面的內(nèi)容爪幻，所以首頁加載的速度會很慢。vue的強大之處就在于vue-router的應用以及后續(xù)的一些內(nèi)容须误。
（1）vue-router可以通過html5的history API或者hash實現(xiàn)單頁應用挨稿，即不刷新跳轉(zhuǎn)，切換地址京痢，只是頁面上的組件的切換奶甘；vue-router就是路由，用于頁面跳轉(zhuǎn)祭椰。
（2）組件之間的嵌套臭家，就像后臺管理系統(tǒng)一樣，左邊欄和頂部欄保持不變方淤，只變換中間像變換的部分（利用children實現(xiàn)钉赁，官方叫命名路線），也可以實現(xiàn)由多個組件的組成的頁面的跳轉(zhuǎn)（官方叫命名視圖）臣淤。
（3）只要在main.js和App.vue以及路由文件中配置好橄霉，可以：后綴.vue中使用<router-link :to="...">后綴.js文件中使用router.push(...)實現(xiàn)頁面或者組件之間的跳轉(zhuǎn)。官方文檔給的很詳細邑蒋，包括歷史記錄等等姓蜂。
（4）樹狀結(jié)構(gòu)！Ｒ降酢钱慢！這個是單頁面應用的核心概念 ，有了樹狀結(jié)構(gòu)卿堂，我們就不需要把路由全部都注冊在整體的根節(jié)點上束莫，每一個節(jié)點都是下一個節(jié)點的根節(jié)點。
（5）vue-router可以實現(xiàn)頁面間傳參草描、路由重定向览绿、起別名等其他功能；
2穗慕、那么又有一個問題來了饿敲，如果如果我想用戶沒有登陸的時候，讓他不能跳轉(zhuǎn)到首頁逛绵，而是跳到登陸注冊的頁面呢怀各？
這就需要用到一個叫做導航守衛(wèi)的東西倔韭，它的原理很簡單，就是通過重定向或取消導航來保護導航瓢对。
官網(wǎng)給出了
（1）寿酌、router.beforeEach
（2）、router.afterEach
（3）硕蛹、在定義的組件的路由里beforeEnter
（4）醇疼、在定義的組件中beforeRouteEnter、beforeRouteUpdate法焰、 beforeRouteLeave
這里做一個關(guān)于登陸注冊的例子僵腺，結(jié)合localStorage，檢測路由
// 使用 router.beforeEach 注冊一個全局前置守衛(wèi)壶栋，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.path === '/forgetPsd' || to.path === '/register') {
next();
} else {
let token = localStorage.getItem('token');
// 檢測本地localStorage是否存在token
if (!token) {
next('/login');
} else {
next();
}
}
});
這里每個保護函數(shù)都接收三個參數(shù)：
to: Route：被導航到的目標Route對象from: Route：正在遠離的當前路線。next: Function：必須調(diào)用此函數(shù)才能解決普监，next中參數(shù)詳見官方文檔贵试，最常用next（），導航將被確認（就是繼續(xù)下去不攔截了）凯正。
3毙玻、小例子
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/',
component: resolve => require(['@/components/common/home.vue'], resolve),
meta: { title: '全局文件' },
children: [
{
path: '/index',
component: resolve => require(['@/views/index.vue'], resolve),
meta: {
title: '系統(tǒng)首頁'
}
},
{
path: '/TaskList',
component: resolve => require(['@/views/TaskList.vue'], resolve),
meta: {
title: '任務列表'
}
}
]
},
{
path: '/forgetPsd',
component: resolve => require(['@/views/ForgetPsd.vue'], resolve),
meta: {
title: '忘記密碼'
}
},
{
path: '/login',
component: resolve => require(['@/views/login.vue'], resolve),
meta: {
title: '登陸'
}
},
{
path: '/register',
component: resolve => require(['@/views/register.vue'], resolve),
meta: {
title: '注冊'
}
},
{
path: '*',
component: resolve => require(['@/views/404.vue'], resolve),
meta: {
title: '404'
}
}
]
})
// 導航守衛(wèi)
// 使用 router.beforeEach 注冊一個全局前置守衛(wèi)，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.path === '/forgetPsd' || to.path === '/register') {
next();
} else {
let token = localStorage.getItem('token');
if (token === null || token === '' || token === undefined) {
next('/login');
} else {
next();
}
}
});
export default router;
開頭設(shè)置mode: 'history'是為了取消vue初始化的項目中路由最前面的#號
path : 自定義的路徑
name：路由的名稱（這個是用來做菜單選中狀態(tài)的廊散，所以一定要寫）
compoment：用來掛載組件 resolve => require(['@/XX/XXX.vue'], resolve) 是異步加載的寫法
@ ： @指的是src目錄桑滩，后面的是目錄中的Vue文件，在指定目錄下一定要有鴨
export default router : 將路由器導出,必不可少
