vue-router官方文檔
官方給的文檔很詳細(xì)，我從在我搭的框架實際應(yīng)用上講述一下vue-router如何在項目中封裝并引用。
1、概念簡介
引用官方的一句話
使用Vue + Vue Router創(chuàng)建單頁應(yīng)用程序非常簡單。借助Vue.js，我們已經(jīng)在使用組件組成應(yīng)用程序。將Vue Router添加到混合中時，我們要做的只是將組件映射到路由，并讓Vue Router知道在何處渲染它們
個人理解
通常的html網(wǎng)頁，跳轉(zhuǎn)到另一個頁面都需要在瀏覽器中刷新一下，等待服務(wù)器響應(yīng)將頁面?zhèn)骰貋恚绻醒舆t，會有一段時間的空白，對用戶體驗效果不佳，于是，單頁面應(yīng)用應(yīng)運而生，因為在一開始就加載出所有頁面的內(nèi)容，所以首頁加載的速度會很慢。vue的強大之處就在于vue-router的應(yīng)用以及后續(xù)的一些內(nèi)容。
（1）vue-router可以通過html5的history API或者h(yuǎn)ash實現(xiàn)單頁應(yīng)用，即不刷新跳轉(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)。官方文檔給的很詳細(xì)，包括歷史記錄等等。
（4）樹狀結(jié)構(gòu)?。?！這個是單頁面應(yīng)用的核心概念 ，有了樹狀結(jié)構(gòu)，我們就不需要把路由全部都注冊在整體的根節(jié)點上，每一個節(jié)點都是下一個節(jié)點的根節(jié)點。
（5）vue-router可以實現(xiàn)頁面間傳參、路由重定向、起別名等其他功能；
2、那么又有一個問題來了，如果如果我想用戶沒有登陸的時候，讓他不能跳轉(zhuǎn)到首頁，而是跳到登陸注冊的頁面呢？
這就需要用到一個叫做導(dǎo)航守衛(wèi)的東西，它的原理很簡單，就是通過重定向或取消導(dǎo)航來保護導(dǎo)航。
官網(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：被導(dǎo)航到的目標(biāo)Route對象from: Route：正在遠(yuǎn)離的當(dāng)前路線。next: Function：必須調(diào)用此函數(shù)才能解決，next中參數(shù)詳見官方文檔，最常用next（），導(dǎo)航將被確認(rèn)（就是繼續(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: '任務(wù)列表'
}
}
]
},
{
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'
}
}
]
})
// 導(dǎo)航守衛(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 : 將路由器導(dǎo)出,必不可少
