路由懒加载 及封装

 
 // 文件 index.js
 
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from '@/store'

//应用插件
Vue.use(VueRouter)

//将VueRouter.prototype的push和replace存储一份
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace

//增强push，用于解决编程式路由导航重复跳转出错的问题
VueRouter.prototype.push = function(location,okCallback,errCallback){
	if(okCallback === undefined && errCallback === undefined){
		originPush.call(this,location).catch(()=>{})
	}else{
		originPush.call(this,location,okCallback,errCallback)
	}
}
//增强replace，用于解决编程式路由导航重复跳转出错的问题
VueRouter.prototype.replace = function(location,okCallback,errCallback){
	if(okCallback === undefined && errCallback === undefined){
		originReplace.call(this,location).catch(()=>{})
	}else{
		originReplace.call(this,location,okCallback,errCallback)
	}
}

//创建并暴露路由器
const router = new VueRouter({
	mode:'history',
	routes,
	scrollBehavior(to, from, savedPosition) {
		if (savedPosition) {
			return savedPosition
		} else {
			return { x: 0, y: 0 }
		}
	}
})

//使用全局前置导航守卫
router.beforeEach(async(to, from, next) => {
	/* 
		1.尝试获取token
		2.若有token，拿着token去获取用户信息
		3.若无token
				(1).就不用获取用户信息了
				(2).并且有些敏感路由，不能放行（以后做）
	*/
	//获取vuex中的userToken
	const {userToken,userInfo} = store.state.user
	//判断
	if(userToken){
		// console.log('你有token，我要进一步判断你是否有用户信息')
		//若有token，证明该用户登录了
		if(userInfo.id){
			// console.log('你不仅有token,你获取过用户信息，你该去哪就去哪，我会放行')
			//不仅有token，而且通过token获取过用户信息 ———— 登录了以后，拿过一次信息了
			next()
		}else{
			// console.log('你虽然有token，但是没有用户信息')
			//虽然有token，未曾通过token获取过用户信息 ———— 刚登录那一下
			try {
				//通过token获取到了用户信息，随后放行
				await store.dispatch('user/getUserInfo')
				// console.log('拉取用户信息成功了，我会放行')
				next()
			} catch (error) {
				// console.log('拉取用户信息失败了，清空local里的token，清空vuex里的token、userInfo,打回登录')
				//虽然有token，但是通过token确获取用户信息失败了 —— token过期 或 token被非法修改了，触发退出登录流程
				await store.dispatch('user/userLogout')
				//强制跳转到登录
				next('/login')
			}
		}
	}else{
		const pathList = ['/pay','/paysuccess','/trade']
		if(pathList.some(p => to.path === p)) next('/login')
		else next()
	}
})

export default router

路由懒加载 模块化

 // 文件: ./router

/* 
	该文件专门用于配置一个一个的路由规则
*/
//引入各个路由组件
/* import Home from '@/pages/Home'
   import Pay from '@/pages/Pay'
*/

//路由懒加载
const Home = ()=> import('@/pages/Home')
const Pay = ()=> import('@/pages/Pay')

export default [
	{
		name:'home',
		path:'/home',
		component:Home,
	},
	{
		name:'pay',
		path:'/pay',
		component:Pay,
		beforeEnter: (to, from, next) => {
			if(from.path === '/trade'){
				next()
			}else{
				next('/home')
			}
		}
	},
	{
		path:'/',
		redirect:'/home'
	},
]

在main.js 中引入 import router from ‘./router’