2-4 玩转单页面应用的控制中心—vue-router

目录：

• 导航守卫
• 路由懒加载

一、导航守卫

比如说我们有一个需求：进入路由的时候，做一些事情，怎么办？比如进入路由的时候获取token值，进入路由的时候，判断用户的权限。

官网导航守卫：导航守卫

我们在main.js中写一个钩子：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。实例：main.js

import routes from './routes'

Vue.config.productionTip = false;

Vue.use(VueRouter);

//NProgress.configure({ showSpinner: false });

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path === '/login') {
    sessionStorage.removeItem('token');
  }
  let token = sessionStorage.getItem('token');
  if (token === 'undefined'){
      token = ''
  }

  if (!token && to.path === '/register') {
      next()
  }
  else if (!token && to.path !== '/login') {
    console.log(to.path);
    next({ path: '/login', query: {url: to.path}})
  }
  else {
    next()
  }
  if (to.path === '/') {
    next({ path: '/projectList',})
  }
});

二、路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

路由懒加载官网：路由懒加载

正常的路由加载：

//专门搞一个路由配置文件
import Home from './components/Home.vue'
import News from  './components/News.vue'
 
export  default {  //之前我们定义在外面的，现在我们把它定义在对象里面
  routes: [
    {
      path:'/home',
      component: Home
    },
    {
      path:'/news',
      component: News
    }
  ]
}

路由懒加载：

//懒加载
const Home = () => import('@/views/Home.vue');
const News = () => import('@/views/News.vue');

let routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/news',
    component: News
  }
];


export default routes;