技術標籤：Vue.jsvuejavascript

import Vue from 'vue' // 引入VUE例項
import VueRouter from 'vue-router' // 引入vue路由

Vue.use(VueRouter) // vue例項呼叫路由

const routes = [ // 配置路由
  {
    path: '/', // 進入系統首次載入的路由 一般都是登入頁面
    redirect: {
      name: 'Customer'
    }
  },
  { // 登入頁路由配置
    path: '/login',
    name: 'Login',
    component:
 
 () => import('@/views/login/index')
  },
  { // 主頁路由配置
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/index'),
    children: [ // 進入主頁後首次載入路由頁面配置
      {
        path: '',
        redirect: '/customer'
      },
      { // 子路由配置
        path: '/customer',
        component: ()
 
 => import('@/views/customer/index'),
        name: 'Customer'
      },
    ]
  }
]

const router = new VueRouter({ // 建立一個路由物件
  routes
})
router.beforeEach((to, form, next) => { // 全域性路由守衛
  console.log(to, form, next, '1111')
  if (to.name === 'Login') {
    alert('您不配！')
    // 不執行next()方法路由就不會跳轉
  }
 
 else next(); // 執行next()方法，跳轉到指定路由頁面
})

export default router // 匯出路由，直接在main.js裡面呼叫即可

// main.js
import router from './router'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')