Vue相关内容(续)

1. Vue CLI中的嵌套路由

通常，在设计视图时，在App.vue中不会设计页面元素，只是添加一个<router-view/>即可！

在其它的视图中，设计的目标效果中可能存在多“页面”中相同的部分，反之，也可以理解为“某个页面的某个区域（不同的部分）是动态变化的”，则对应的区域（某个页面中会变化的部分）就可以设计为<router-view/>，同时，由于当前视图本身也是显示在App.vue设计的<router-view/>中的，就出现了“嵌套路由”！

当项目中多个视图中都使用到了<router-view/>时，某个视图组件到底显示在哪个<router-view/>，取决于路由的配置：

• 如果某个视图的路由配置在src/router/index.js的routes常量中，则此视图将显示在App.vue的<router-view/>中

  const routes = [
    {
      path: '/',
      component: HomeView
    },
    // 以下AboutView将显示在App.vue的<router-view/>中
    {
       path: '/about',
       component: () => import('../views/AboutView.vue')
     }
  ];
  

• 如果某个视图的路由配置在src/router/index.js的routes常量中的某个路由配置的子级，则此视图将显示在其父级路由的视图中

  const routes = [
    {
      path: '/',
      component: HomeView,
      // 以下AboutView将显示在HomeView的<router-view/>中
      children: [
        {
          path: '/about',
          component: () => import('../views/AdminIndexView.vue')
        }
      ]
    }
  ];
  

2. Vue CLI项目的启动端口

Vue CLI项目在启动时，默认将尝试占用8080端口，如果此端口已经被占用，则会顺延后一位端口号，即尝试占用8081……当然，如果8081也被占用，则会继续顺延至8082，以此类推。

建议为Vue CLI项目显式的指定端口，避免发生冲突，或多次启动时的端口号不一致。需要在package.json，原本有（通常在第6行）：

"serve": "vue-cli-service serve",

在以上属性值的末尾添加--port 端口号，例如：

"serve": "vue-cli-service serve --port 8888",

3. 在Vue CLI项目中使用axios

首先，需要安装axios：

npm i axios -S

然后，需要在main.js中导入，并声明为Vue对象的成员：

import axios from 'axios';

Vue.prototype.axios = axios;

使用axios发请求并处理响应的代码示例：

let url = 'http://localhost:8080/login';
console.log('请求路径：' + url);
console.log('请求参数：');
console.log(this.form);

this.axios.post(url, this.form).then((response) => {
    console.log('服务器端的响应：');
    console.log(response);
    let responseBody = response.data;
    if (responseBody == 1) {
      // 登录成功
      this.$message({
        message: '登录成功！（暂不跳转）',
        type: 'success'
      });
    } else if (responseBody == 2) {
      // 用户名错误
      this.$message.error('登录失败！用户名不存在！');
    } else {
      // 密码错误
      this.$message.error('登录失败！密码错误！');
    }
});

注意：在then()内部，必须使用箭头函数（() => {}），不可以使用一般的function函数！

4. 关于跨域访问

默认情况下，不允许执行跨域访问（从某一台服务器向另一台服务器发起异步请求），如果出现跨域访问，在浏览器的错误提示大致如下：

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

提示：以上错误的关键字是：CORS！

在基于Spring Boot开发的服务器端项目中，添加一个Spring MVC的配置类即可允许跨域访问！

可以让Spring Boot项目的启动类实现WebMvcConfigurer接口，并在此类中添加以下代码：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOriginPatterns("*")
            .allowedHeaders("*")
            .allowedMethods("*")
            .allowCredentials(true)
            .maxAge(3600);
}

此请求可以正常发出（浏览器不会报告错误），且服务器端可以接收到请求参数。

完成后，重启服务器端项目，然后，使用客户端再次发出请求，