路由拦截
- 在一些页面需要验证是否登录的时候, 就可以使用路由拦截
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')
},
]