路由技术

路由文件的内容

在router文件下的index.js文件
引入路由

import Vue from 'vue'
import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error => error)
}

Vue.use(VueRouter)  
var routes = [
// 默认跳转到登录页面
    {
    path: "/",
    redirect: "/Login",
  },
  {
    path: "/Login",
    // 懒加载
    component: () => import('../common/Login'),
  },
// 登录后进入第一个页面
  {
    path: "/admin",
    component: () => import('../common/Admin'),
    redirect: '/HomePage',
    children: [
      // 主首页
      {
        path: '/HomePage',
        component: () => import('../common/navMain/BasicIndex.vue'),
        meta: {
          title: '首页',
          headerNav: '首页'
        }
      }
    //   这里可以加别人路由
    ]
  },
  {
    path: '*',
    component: () => import('../common/NotFound'),//显示没有找到文件的页面
    meta: {
      title: '404 - 找不到文件或目录。',
    }
  },
]
const router = new VueRouter({
  base: '/',// 配置单页应用的基路径,我的理解就是访问这个地址的时候开始是/，根据路由时/跳转到登录页面
  routes
})
router.beforeEach((to, from, next) => {
  // 每次跳转路由检查有没有token
  if (!sessionStorage.getItem("Token")) {
    if (to.path === '/Login') {
      next()
    } else {
      next('/Login')
    }
  } else {
    if (to.meta.title) {
    // 这个是浏览器上面的名称，to.meta.title即将跳转的路径的title
      document.title = to.meta.title
    }
    next()
  }
})
export default router

main文件

 然后就是在main文件中引入路由，全局可以访问

import router from './router'
// 默认请求头给token，不用请求的时候特意给
axios.defaults.headers.get['authorization'] = sessionStorage.getItem("EESToken");
axios.defaults.headers.put['authorization'] = sessionStorage.getItem("EESToken");
axios.defaults.headers.post['authorization'] = sessionStorage.getItem("EESToken");
axios.defaults.headers.delete['authorization'] = sessionStorage.getItem("EESToken");
new Vue({
  router,//引入路由
  render: h => h(App)
}).$mount('#app')