vue-router的使用，以及路由守卫的使用，复制直接用！

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')