vue2.0_路由懒加载的设置和重置路由实现更新路由配置

路由懒加载

 前言：

  我们都知道网页默认刚打开的时候，就去加载了所有的页面，首屏加载速度变得很缓慢。而路由懒加载就是只加载你当前进入的那个模块页面。按需加载路由对应的资源，可以提高首屏加载速度（ 注: 首页不用设置懒加载，而且一个页面加载过后再次访问是不会重复加载的）。

 实现原理：

  将路由相关的组件，不再直接导入了，而是改写成异步组件调用的方法，只有当函数被调用到的时候，才去加载对应的组件内容。

 普通路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { 
    	path: '/login',
     	component: Login
    },
    {
     	path: '/home',
      	component: Home
    }
  ]
 
export default router

 懒加载路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
 routes: [
    { 
    	path: '/login',
     	component: () => import('@/views/login/index.vue')
    },
    {
     	path: '/home',
      	component: () => import('@/views/home/home.vue')
    }
  ]
 
export default router

重置路由

为什么要重置路由？

  假设：用户在自己电脑上登录了管理员的账号，这个时候路由中就注入了管理员的路由。然后用户退出登录，保持着页面不刷新，改成普通用户的账号进行登录。这个时候路由中也注入了普通用户的路由。因此，在路由中就将存在两种用户类型的路由。即使用户不感知，通过改变 url，普通用户也可以访问管理员的页面！

解决办法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}

export default router

//通过新建一个全新的 Router，然后将新的 newRouter.matcher 赋给当前页面的管理 Router，以达到更新路由配置的目的。