1. SPA是什么
单页Web应用(single page application,SPA),就是只有一个Web页面的应用,
是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序
单页面应用程序:
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序:
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积,加快页面响应速度,降低了对服务器的压力
更好的用户体验,让用户在web app感受native app的流畅
2. SPA实现思路和技术点
1 ajax
2 锚点的使用(window.location.hash #)
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 监听锚点值变化的事件,根据不同的锚点值,请求相应的数据
5 原本用作页面内部进行跳转,定位并展示相应的内容
3.路由的基本概念与原理
路由是一个比较广义和抽象的概念,路由的本质就是对应关系。
路由分为:前端路由 后端路由
3.1.前端路由
概念:根据不同的用户事件,显示不同的页面内容
本质:用户事件与事件处理函数之间的对应关系
用户————→ 前端路由————→事件处理函数 █ █ ▆
↑ |
|———————————————————————↓
事件函数渲染响应内容
3.2后端路由
概念:根据不同用户的URL请求,返回不同的内容 本质:
URL请求地址与服务器资源之间的对应关系
4、为什么会使用Vue路由?
由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
5.实单页的web应用
1、引入Vue vue-router的js依赖
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入vue-router.js(路由) -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.0/vue-router.js"></script>
2、首先要定义组件(就是展示不同的页面的效果)
//2.创建自定义组件m
const Home=Vue.extend({template:'<div><h1>首页</h1><div>首页内容区域</div></div>'});
const About=Vue.extend({template:'<div><h1>关于</h1><div>关于内容区域</div></div>'});
3.定义路由(路由及路线)
var rotes=[
{name:'Home',path:'/Home',component:Home},
{name:'About',path:'/About',component:About},
]
4、将路由集合组装成路由器
var router=new VueRouter({routes:rotes});
5、将路由挂载到Vue容器中
var vm=new Vue({
// el:'#app',
router:router,
data:function(){
return{
ts:new Date().getTime()
}
},
methods:{
goto:function(){
this.$router.go(1);
},
back:function(){
this.$router.go(-1);
},
change:function(){
this.$router.push('/Home')
}
}
}).$mount('#app');
6、定义锚点
<div>
<!-- 视口 -->
<router-view/>
</div>
7、跳转
<div>
<!-- 路由处理 -->
<router-link to="/Home">首页</router-link>
<!-- replace 清除点击上一次之前的所有记录-->
<!-- 配置首页默认显示的组件 把路由的路径改为/-->
<!-- tag="li" 设置路由的标签 -->
<router-link to="/About" >关于</router-link>
</div>
append
设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<base herf="${pageContext.request.contextPath}/"/>
base标签作用于head标签之间在link和script标签中的href和src属性之前加入
<base href="/vue04/">
<script src="js/vue.js">
base中href+script标签中的src /vue04/js/vue.js
<router-link :to="{ path: 'relative/path'}" append></router-link>
有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>
active-class
设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代
exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>