今日分享内容
一、SPA简介
SPA是什么？
用于单页面Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中。
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 。
对于以前 使用的jsp做页面的时候，一个页面会有很多个jsp组成，现在我们点击导航栏，不再是跳转页面，通过路由的方式，跳转到组件，将使用SPA用于html页面处理多结构复杂的组件通信问题。
优势：
①减少了请求体积，加快页面响应速度，降低了对服务器的压力
②更好的用户体验，让用户在web app感受native app的流畅
二、路由实现思路
首先进入官网BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
找到相对应的js版本，
第一步：引入路由js的依赖
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
第二步：创建自定义组件
const Home = Vue.extend({});
注意：
①extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件。
②也可以用以前的方式创建和获得组件，效果也是一样的。
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件
第三步： 定义路由与组件的对应关系
var routes = [{path: '/about',component: About}];
注意：根路径“/”
第四步：生成路由对象然后传 `routes` 配置
const router = new VueRouter({routes:routes});
注意:
route和router的区别
route：路线
router：路由器
路由器中包含了多个路线
第五步：将vue对象挂载到vue实例中
var vm = new Vue({router: router}).$mount('#app');
第六步：定义锚点
<router-view></router-view>
第七步：触发锚点事件
<!-- 使用RouterLink组件导航. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/home">首页</router-link>
步骤解析如图所示：
代码块展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue的js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<!-- 1、引入路由js依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
<title>1、路由SPA</title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<!-- 7、触发锚点事件 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 6、定义锚点 -->
<router-view></router-view>
</div>
<script type="text/javascript">
///2、定义组件 --->首页对应的组件、关于对应的组件
// const/let/var
const Home = Vue.extend({
template:'<div>这是首页内容，展示最新的10篇博客</div>'
})
const About = Vue.extend({
template:'<div>这是关于本站显示的内容，本站的发展史。。。。</div>'
})
// 3/定义路由与组件的对应关系
let routes = [
{path:'/home',component:Home},
{path:'/about',component:About},
]
// 4、生成路由对象
const router = new VueRouter({routes:routes})
new Vue({
el:'#app',
router,//5、将vue对象挂载到vue实例中
data(){
return{
msg:'hello,我是一杯咖啡！'
}
}
})
</script>
</body>
</html>
运行效果展示：
当点击首页时会出现以下效果
点击关于时：
三、无痕浏览
replace
