路由拦截

• 在一些页面需要验证是否登录的时候, 就可以使用路由拦截beforeEach

创建一个Login.vue组件用来拦截后跳转到login页面
Login.vue 内容如下

<template>
  <div>
    login  <!-- localStorage.setItem('token',JSON.stringify({username:"lanxiaobai"}))     向浏览器内添加一个token -->
    <button>登录</button>
  </div>
</template>

创建一个 Center.vue, 当访问这个组件内容时就需要登录进行拦截
Center.vue 内容如下

<template>
  <div>
    Center
  </div>
</template>

全局的路由拦截

全局的路由拦截就是在router目录下的index.js中配置
配置如下:

import Center from '../views/Center.vue' // 我的
import Login from '../views/Login.vue' // 登录
  
// 路由数组 coutes
const coutes = [
  { // 我的
    path: '/center',
    component: Center
  },
  { // 登录
    path: '/login',
    component: Login
  },
]

const router = new VueRouter({
  // routes: routes   // 由于上面的数组名与 routes关键字一样, 就可简写
  routes  // 简写
})
**************我是高亮的线******************
// 全局的路由拦截 
// to 表示从哪里来
// from 表示要去哪里
// next 表示是否放行
router.beforeEach((to, from, next) => {
  if (to.fullPath === '/center'){
    console.log('在这里验证token')
  } else {
    next()
  }
})
export default router

上面是单个的如果需要多个就需要创建一个数组

// 全局的路由拦截
router.beforeEach((to, from, next) => {
  // 定义一个列表
  const auth = ['/center', '/order', '/xxxx']
  if (auth.includes(to.fullPath)) {   // 如果to.fullPath 在这个列表里,就验证token, 否则放行
    // console.log('验证token')
    if (!localStorage.getItem('token')) {
      next('/login')  // 当没有token就next到login页面
    } else {
      next()    // 有就放行
    }
  } else {
    next()
  }
})

局部的路由拦截

• 局部的路由拦截就是哪一个组件需要就在其组件内加入即可
• 比如在上面的 Center.vue组件中:

<template>
  <div>
    Center
  </div>
</template>

<script>
export default {
  // 局部路由拦截
  beforeRouterEnter (to, from, next) {
    if (!localStorage.getItem('token')) {
      next('/login')
    } else {
      next()
    }
  }
}
</script>

路由懒加载

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

• 就是当写完整个项目后, 如果没有进行路由懒加载, 在执行npm run build 的时候, vue会吧整个项目合并为两个js文件, 这时就会导致文件过大造成第一次加载过慢,
• 解决方法也是很简单, 通过配置router 吧部分组件生成单独的js文件即可
• 在router目录下的index.js中配置, 比如把 Login.vue组件进行懒加载

import Center from '../views/Center.vue' // 我的
// import Login from '../views/Login.vue' // 登录 使用路由懒加载时,不用在这里导入(eslint会报错)
  
// 路由数组 coutes
const coutes = [
  { // 我的    ---------- 
    path: '/center',
    component: Center
  },
  { // 登录  -------  实现路由懒加载只需把component 写成这样的就可
    path: '/login',
    component: () => import('../views/Login.vue')
  },
]