本文介绍了Vue.js中的组件化思想，包括组件的出现、优势以及如何使用组件。接着详细讲解了路由的概念、实现步骤和嵌套机制，并展示了重定向和转发的设置。最后讨论了跨域问题，解释了同源策略和解决方法，如JSONP和CORS。
一、组件化
1.组件的出现: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱 不便于管理. 开发维护时 成本较高，所以才有了组件的出现
2.组件化思想：在VUE中 可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理，且组件可以进行复用，为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css.
3.为什么要使用组件：
- 原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想.
- 前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐.(微服务框架)
- 组件采用树形结构, 可以将功能小型化.单独维护.
- 组件是一个独立的个体,内部包含HTML/CSS/JS
- 总的来说就时是高内聚低耦合
4.如何理解template属性?
- template标签是组件中定义html标记的模板.
- template标签必须有根标签div
- template标签最好定义在body标签内部JS外,写法方便.
5.组件使的注意事项
- 组件的使用必须在VUE对象渲染的区域中使用.
- 组件有全局的/有局部的.注意作用域.
- 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
- 组件必须先定义再使用.
二、路由
1.概念
用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由.
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
2.实现步骤
2.1 引入JS类库
注意：路由依赖于vue，需要先导入vue.js
<script src="../js/vue.js" type="text/javascript"></script>
<script src="../js/vue-router.js" type="text/javascript"></script>2.2 指定路由跳转链接
注意：router-link to=""解析后就是一个a标签，to解析后变成a标签的href属性
<router-link to="/home">主页</router-link>2.3 指定路由填充位
注意：组件内容展现的位置，可以自己调节，要在渲染区下
<router-view>组件展现内容</router-view>2.4 封装路由对象
流程：定义请求与组件的映射，添加一个对象，此对象封装了组件，再在Body里定义一个template标签进行组件内容的编写，注意对应关系
<!-- 定义template标签 -->
<template id="homeTem">
<div id="">
<h1>这里是系统首页</h1>
</div>
</template>
<script type="text/javascript">
/* 4.封装路由对象 */
let HomeCom={
template:"#homeTem"
}
let router=new VueRouter({
//routes 定义请求与组件的映射关系qqqqqqq
routes:[
{path:"/home",component:HomeCom}
]
})2.5 vue对象绑定路由
注意：当定义的kv相同时可以简写为一个
const app=new Vue({
el:"#app",
router
})3.路由嵌套机制
按理来说路由可以无限嵌套（俄罗斯套娃）
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由的嵌套</title>
</head>
<body>
<div id="app">
<h1>江哥动物园</h1>
<router-link to="/tiger">老虎</router-link>
<router-link to="/lion">狮子</router-link>
<router-view></router-view>
</div>
<template id="tigerTem">
<div>
<h1>我是一只凶猛的喵</h1>
<img src="images/u=3058722990,2113203861&fm=15&fmt=auto&gp=0.webp"/>
</div>
</template>
<template id="lionTem">
<div>
<h1>我是狮子王 辛巴!!!!</h1>
<img src="images/6666666624062&fm=26&fmt=auto&gp=0.webp"/>
<h3>
<!-- 实现路由的嵌套机制 -->
<router-link to="/lion/one">原配</router-link>
<router-link to="/lion/two">小妾</router-link>
<!-- 子级应该在该区域展现数据!!!! -->
<router-view></router-view>
</h3>
</div>
</template>
<template id="oneTem">
<div>
<h1>我是原配-老大</h1>
<img src="images/mn.jpg"/>
</div>
</template>
<template id="twoTem">
<div>
<h1>我是小妾-更喜欢我!!!</h1>
<img src="images/women_blonde_drawing_artwork_monochrome_Krys_Decker_portrait_display_face-1215629.jpg"/>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let tigerCom = {
template: "#tigerTem"
}
let lionCom = {
template: "#lionTem"
}
let oneCom = {
template: "#oneTem"
}
let twoCom = {
template: "#twoTem"
}
/*
1.如果需要在App根标签中跳转,则写到routes根目录下
2.如果需要进行父子嵌套,则应该使用children属性
3.如果使用children属性,则在自身的router-view展现数据
*/
let router = new VueRouter({
routes: [
{path: "/tiger",component: tigerCom},
{path: "/lion",component: lionCom,
children: [
{path: "/lion/one",component: oneCom},
{path: "/lion/two",component: twoCom},
],
}
]
})
const app = new Vue({
el: "#app",
router
})
</script>
</body>
</html>知识点：
- 嵌套需要在一个组件里加入路由标签和展现区，再在这个标签跳转的组件里再添加路由标签和展现区无穷尽
- 组件一律写在body里js外
- 映射是如果就在父级页面上展现组件则正常写即可，如果需要在父级下展现嵌套的路由则在父级得到映射里添加children属性
三、重定向/转发
1.转发
说明: 用户请求服务器时,由服务器将请求转给另一台服务器的过程.叫做转发
2.重定向
说明: 用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向
vue中设置重定向：在映射最上方加入redirect属性
{path: "/",redirect:"/lion"},
{path: "/tiger",component: tigerCom},
{path: "/lion",component: lionCom, 效果：当访问http://127.0.0.1:8080时会重定向到http://127.0.0.1:8080#/lion.页面展现lion所映射的组件
四、跨域问题
要说跨域问题那就先来说什么是域，这里又涉及到了同源策略
1.同源策略
规定: 浏览器要求在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足请求协议、域名、端口号这三个都相同才则满足同源策略.可以访问服务器.
HTML默认是8080端口号，而Ajax访问我们的后端服务器则不是，所以要涉及到跨域问题
注意：
IP与域名相映射也不满足同源策略
不写端口号会有默认端口号http协议默认端口号是80，https协议默认端口号为443
2.跨域
不满足同源策略的就算跨域
3.解决方法
3.1JSONP
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在<script>标签的src属性里这就如同我们请求一个普通的JS脚本：
<script src="http://www.abc.com/index.php/?param1=1&callback=fnName"> </script>
JSONP实现跨域请求的原理：
就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：
回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
本站并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
callback({“name”:“fegnjie”,“age”:“18”})，这样本站浏览器会调用callback函数，并传递解析后json对象作为参数。
3.2CORS方式
说明: CORS（Cross-origin resource sharing） “跨域资源共享”,现在的主流的浏览器都支持cors的方式. 如果需要跨域,则需要配置响应头信息.标识是否允许.
在服务器端加入@CrossOrigin的注解默认响应头允许所有网站进行跨域请求，在后面加入参数就可以限制网站的请求
原理图：
完工回家睡觉了
满怀希望就会所向披靡！！！
扫一扫
3326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
