VUE入门项目：快递收件管理--路由router

router/index.js

import { createRouter, createWebHashHistory  } from "vue-router";

const routes= [
  {//登陆界面
    path: '/',
    name:'Login', 
    component: ()=>import(/*webpackChunkName:'login'*/'@/views/login.vue') 
  },
  {//首页
    path: '/layout',
    name:'Layout', 
    component: ()=>import(/*webpackChunkName:'Layout'*/'@/views/Layout.vue') ,
    children:[
      //收件
      {
        path:'acp',
        name:'Acp',
        component:()=>import('../views/Acp.vue')
      },
      //取件
      {
        path:'rev',
        name:'Rev',
        component:()=>import('../views/Rev.vue')
      },
      //参数维护
      {
        path:'pamc',
        name:'Pamc',
        component:()=>import('../views/Pamc.vue')
      },{
        path:'pamt',
        name:'Pamt',
        component:()=>import('../views/Pamt.vue')
      },{
        path:'pamp',
        name:'Pamp',
        component:()=>import('../views/Pamp.vue')
      }
    ]
  }
]
//创建一个路由器对象
const router = createRouter({
  history:createWebHashHistory(),
  routes
})
//页面转换变动条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//定义路由导航前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next()  
})
//定义路由导航后置守卫
router.afterEach( route => {
  NProgress.done();
})
export default router

config/conster.js

//开发模式
let model = {
  //正式阶段接口地址
  dev:'http://10.68.10.59:8071/',
  //开发阶段接口地址
  test:'http://localhost:5058/',
}
//定义请求根路径
export const  url = model.test  //根据当前的开发阶段返回对应的接口地址

style/headtap.css

/*-----------登陆-------------*/
.loginBody {
  width: 100%;
  height: 100%;
  border:hidden;
  overflow:hidden;
  background-image: url(../static/beijing.jpg);
  background-size: 100% 100%;
  background-position: left top;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  padding-top: 160px;
  top:0px;
  left:0px;
}
.loginTitle{
  width:300px;
  height:80px;
  background-image: url(../static/logo.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.loginRoot {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 50px auto;
    width: 320px;
    padding: 15px 35px;
    background: aliceblue;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #c6c6c6;
    font-family: Arial, Helvetica, sans-serif;
}

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath:'./',  
  devServer: {
      proxy: {
          '/api': {
              target: 'http://10.68.10.59:8071', //后端接口地址
              changeOrigin: true, //是否允许跨越
              pathRewrite: {
                  '^/api': '' //路径重置,
              }
          }
      },
  }
})