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

安装完路由，我们在更目录创建一个router的文件夹，然后在文件夹下面新建一个index.js文件

index.js:

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

Vue.use(VueRouter) // vue实例调用路由

const routes = [ // 配置路由
  {
    path: '/', // 进入系统首次加载的路由 一般都是登录页面
    redirect: { // 重定向的路由，就是比如更目录是login页面，当登录成功后会自动从定向到Customer路由文件
      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) => { 
// 全局路由守卫，这里路由守卫经常用来判断用户是否登录之内的
// 比如验证一下是否有token登录等信息，如果没有直接退回登录页，如果有就正常跳转
  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')

在项目中进行路由跳转：

this.$router.push({path: '/login'});

你学废了吗？