vue-router的元信息

基本的vue-router

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/login'    // 登陆
import Home from '@/components/Home /home'    // 主页
Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

export default router = new Router({
  routes
})

路由元信息

• 定义

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: {name: 'Channel'},
    // 这就是路由元信息
    meta: { requiresAuth: true }
  }
]

• 作用

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

• 作用示例

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/login'    // 登陆
import Home from '@/components/Home /home'    // 主页
Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

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

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.user) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next()
    }
  } else {
    next()   // 这个 next() 不要忘记了
  }
})

export default router

• 注:　本文章仅供参考