VUE全家桶项目实战-- 3.根界面和路由的配置,登录界面设计

一.App.vue 根界面的配置

二.在components 路径下创建login.vue

三.配置路由router

​ 打开router路径下index.js

import Vue from 'vue'
import Router from 'vue-router'
//导入Login 组件 
import Login from '../components/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由重定向,访问 /  跳转到登录组件
      // 访问路径为http://localhost:8080/
    {path:'/',redirect:'/login'},
     //访问/login
    {path:"/login",component: Login},
    
  ]
})

export default router

四.后端跨域配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}