VUE—利用meta设置是否需要跳转到登录页面（图文详情）

VUE—利用meta设置是否需要跳转到登录页面

第一步：在index.js路由里配置

  meta: {
    login: true,
    title: '我的工作台'
    }

利用login判断是否需要跳转到登录页面，true是需要，false是不需要

第二步：在index.js里更改

let router = new Router({
export default router

将原本的export修改成以下代码

在最后一行输出

第三步：路由钩子函数，在export上面写

router.beforeEach((to, from, next) => {
  let isLogin = to.matched.some((item) => item.meta.login)
  // matched判断父子路由，some只要一个true就返回true
  if (isLogin) {
	// 如果是true证明需要登录后才能查看，这时需要获取localstorage中的用户名，查看是否登录
	// 这里的this.$local是指的router的方法，router并没有这个方法，所以指向需要更改，不能再用this
	// 要用router.app
    let userinfo = router.app.$local.get('user')
    if (userinfo.username) {
      next()
      // 如果localstorage有用户名证明已经登录可以直接查看next（）即可
    } else {
      next('/Login')
      // 如果没有登录跳转到登录页面
    }
  }
  next()
  // 这个next（）是钩子函数的，不可遗忘
})