使用vue-router beforEach实现判断用户登录跳转路由筛选功能

大佬教程收集整理的这篇文章主要介绍了使用vue-router beforEach实现判断用户登录跳转路由筛选功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在开发webApp的时候，考虑到用户体验，经常会把不需要调用个人数据的页面设置成游客可以访问，而当用户进入到一些需要个人数据的，例如购物车，个人中心，我的钱包等等，在进行登录的验证判断，如果判断已经登录，则显示页面，如果判断未登录，则直接跳转到登录页面提示用户登录，今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。

@H_616_3@实现

本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有一定的vue基础，如果您目前是一个新手，那么网上搜索一下就好，相关文章非常多，这里就不再赘述了。 话不多说，直接上代码。 为了方便日后代码的可维护性，我把相关方法写在了一个新建的filter.js文件里

接下来进入filter.js文件中，首先引入vue-router： import router from "./router"; 然后我们使用 router.beforEach 方法：

 {
  //根据字段判断是否路由过滤
  if (to.matched@L_747_29@me(record => record.Meta.auth)) {
    if (getToken() !== null) {
      next()
    } else {
      //防止无限循环
      if (to.name === 'login') {
        next();
        return
      }
      next({
        path: '/login',});
    }
  } else {
    next()//若点击的是不需要验证的页面,则进行正常的路由跳转
  }
});

大佬总结

以上是大佬教程为你收集整理的使用vue-router beforEach实现判断用户登录跳转路由筛选功能全部内容，希望文章能够帮你解决使用vue-router beforEach实现判断用户登录跳转路由筛选功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。