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",
"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;
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.
在基于Spring Boot开发的服务器端项目中,添加一个Spring MVC的配置类即可允许跨域访问!
可以让Spring Boot项目的启动类实现WebMvcConfigurer
接口,并在此类中添加以下代码:
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedHeaders("*")
.allowedMethods("*")
.allowCredentials(true)
.maxAge(3600);
}
完成后,重启服务器端项目,然后,使用客户端再次发出请求,此请求可以正常发出(浏览器不会报告错误),且服务器端可以接收到请求参数。
原文地址:https://www.jb51.cc/wenti/3280186.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。