vue-router元信息

基本的vue-router （router文件夹下的js）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes = [
 {
    path: '/',
    redirect: '/login' // 重定向的地址
  },
 {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },
{
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue')
    //在home下面加载二级路由
    children: [
      //默认首页
      {
        path: 'index',
        name: 'index',
        component: () => import('../views/Index.vue'),
      }
   ]
]
// 根据路线配置，创建路由实例，并导出
export default router = new Router({
  routes
})

路由元信息

• 定义

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
    // 这就是路由元信息
    meta: { requiresAuth: true}
   }
]

• 作用

1. 用来标记这个路由信息是否需要检测，true 表示要检测，false 表示不需要检测
2. requiresAuth 是自己起的字段名称

• 作用示例

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
    // 这就是路由元信息
    meta: { requiresAuth: true}
   }
]

// 页面刷新时，重新赋值 token
if (window.localStorage.getItem('token')) {
  store.state.user = window.localStorage.getItem('token')
}

const router = new Router({
  routes
})

// 在路由更新之前都去遍历路由的meta元信息, 判断有没有requiresAuth
router.beforeEach((to, from, next) => {
  // 如果有requiresAuth, 则开始验证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果验证不通过, 则重定向到login页面
    if (!store.state.token) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next()
    }
  } else {
    next()   // 这个 next() 不要忘记了
  }
})

export default router