基本的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下面加載二級(jí)路由
    children: [
      //默認(rèn)首頁
      {
        path: 'index',
        name: 'index',
        component: () => import('../views/Index.vue'),
      }
   ]
]
// 根據(jù)路線配置，創(chuàng)建路由實(shí)例，并導(dǎo)出
export default router = new Router({
  routes
})

路由元信息

• 定義

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

• 作用

1. 用來標(biāo)記這個(gè)路由信息是否需要檢測(cè)，true 表示要檢測(cè)，false 表示不需要檢測(cè)
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}
   }
]

// 頁面刷新時(shí)，重新賦值 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, 則開始驗(yàn)證
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果驗(yàn)證不通過, 則重定向到login頁面
    if (!store.state.token) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next()
    }
  } else {
    next()   // 這個(gè) next() 不要忘記了
  }
})

export default router