vue路由的重定向

路由的重定向——在进入页面之前做的处理

需求：项目的某些页面没有登录（本地没有账号密码）是不允许查看的，需要退出到登录页面
之前写react项目都是在对应页面的willMount周期中处理的，近日学vue学到一个统一处理的方式
1.单独生成一个redirect.js文件，内容如下：

//路由重定向,在跳转之前确认是否确认跳转到该页面
import router from './router';
import { loggedIn } from './utils/axios';
import { Toast } from 'vant';

const redirectList = ['/login', '/register', '/forgetPwd'];//不需要账号密码的页面路由

router.beforeEach((to, from, next) => {
     if (redirectList.indexOf(to.path) !== -1) {  //说明该页面不需要账号密码
          next()
     } else {
          if (loggedIn()) {   //如果需要密码，查看本地是否存在账号密码
               next()
          } else {
               Toast({
                    message: "请先登录...", duration: 2000, onClose: () => {
                         next('/login')
                    }
               })
          }
     }
})

2.在main.js中引入该文件
3.效果：如果本地的账号密码清除了，那么重新访问需要账号密码的页面会返回到登录页面。

PS.
1.loggedIn()该方法是自定义的，用来判断本地是否存储有有效的账号密码；
2.可以根据项目需求来做处理