main.js

router.beforeEach((to, from, next) => {
  let isLogin = localStorage.getItem('userInfo')   //登录时存的数据
  if (to.matched.some(record => record.meta.requireLogin)) {  //路由页面是否有meta值
    if ( to.name !== 'login' && !isLogin ) {    
      next({ path: '/' })
    } else {
      next()
    }
  } else {
    next() 
  }
})

router/index.js

//在路由页面 加meta 判断此页面是否需要登陆后才可以进入
{
      path: '/record',
      name: 'record',
      component: record,
      meta: { requireLogin: true }
    }

vue vue-router是否已登录路由验证
main.js router/index.js
Vue Router 中的meta字段是什么
我们在用Vue做网站登录验证时常用到Vue-Router官方路由器管理，这时候会调用beforeEach函数上面...
Vue中的导航守卫（路由守卫）
路由首位使用场景：例如项目中的登录验证，权限管理。等等都需要进行路由跳转对此，vue-router 提供的 be...
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
Vue-Router 原理实现一、Vue-Router 动态路由二、Vue-Router 嵌套路由三、Vue...
vue移动端router-view嵌套实现底部导航切换
路由使用 vue-router组件库使用 vue-ydui效果图：项目结构大体流程路由代码登录界面logi...
2018-09-24 vue.js vue-router
vue-router Vue路由器 Git 安装 npm install vue-router 路由中有三个...
Vue 基础 - 前端路由
使用vue-router实现前端路由安装vue-router：配置路由文件，并在vue实例中导入：设置视图（...
Vue2.0一个login跳转实例
需要解决的问题：store存储登录状态Vue-Router导航钩子拦截路由Vue-Resource获取后台的数据需...
vue-router学习总结
1.引入vue-router npm install vue-router --save 2.设置路由（1）路由实...
Vue,Axios,iview实战管理系统
项目实现登陆验证，iviewui组件使用，vue-router路由拦截，在删除登陆存储的token后，直接路由进登...