一.路由的概念与原理
路由的本质就是一种对应关系，比如我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。
路由分为
- 前端路由
- 后端路由
后端路由
后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。 由服务器端进行实现，并完成资源的分发。
前端路由
前端路由依靠hash值(锚链接)的变化进行实现。
后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由。 基本概念：根据不同的事件来显示不同的页面内容，即用户事件与事件处理函数之间的对应关系。 前端路由主要做的事情就是监听事件并分发执行事件处理函数。
hash值(锚链接):
示例：
<body>
<a href="#two">第二页</a>
<a href="#three">第三页</a>
<div style="height: 1500px;">one</div>
<div id="two" style="height: 1500px;">two</div>
<div id="three" style="height: 1500px;">three</div>
</body>
运行：
当我们点击第二页时，
- 页面的url的后面会增加该超链接的内容，显然url改变了，但是对于后端路由来说，这个url没有改变。因为它不认识后边的#two。所以这还是一个页面的显示。
- 但是对于前端路由来说，它可以感觉到这个url的变化，会根据url后边的#two进行显示相应的页面。
- 支持前进和后退的功能
SPA（Single Page Application）单页应用
- 后端渲染（存在性能问题）
- Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的后退操作）
- SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
- SPA的实现原理之一：基于URL地址的hash（hash的变化会导致浏览器访问历史记录的变化，但hash的变化不会触发新的URL请求，但是网页的url会不断显示#xxx）
- 在实现SPA的过程中，最核心的技术点就是前端路由
单页应用不是想当然的整个网站只有一个html文件，还是分模块进行开发，通过前端路由进行跳转。
vue开发的网页--单页应用---核心是前端路由--有两种 - 基于hash(默认)
- history
基于hash的前端路由(原始的通过监听hash值变化)
前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换） 核心实现依靠一个事件，即监听hash值变化的事件
window.onhashchange = function(){
//location.hash可以获取到最新的hash值
location.hash
}
示例：
简单的页面跳转
<body>
<a href="#two">第二页</a>
<a href="#three">第三页</a>
<div style="height: 1500px;">one</div>
<div id="two" style="height: 1500px;">two</div>
<div id="three" style="height: 1500px;">three</div>
<script>
#监听hash的值
window.onload = function(){
window.onhashchange = function(){
alert(location.hash)
}
}
</script>
</body>
运行：
点击第二页
简单的小案例
<body>
<div id="app">
<a href="#zhuye">主页</a>
<a href="#keji">科技</a>
<a href="#caijing">财经</a>
<!-- 给名为zhuye的组件占位 -->
<component is='zhuye'></component>
</div>
<script>
//定义组件
let zhuye = {
template:'<div>主页信息</div>'
}
let vm = new Vue({
el:'#app',
data:{
},
//注册组件
components: {
'zhuye':zhuye
}
})
</script>
分析：
结果：
插：当JSON对象中的键值对的键名和值一摸一样时，可以直接写一个即可。
components:{
'zhuye':zhuye <=======> zhuye
}
那么对上边的案例进行完善：
基于hash的前端路由的实现：
<body>
<div id="app">
<a href="#zhuye">主页</a>
<a href="#keji">科技</a>
<a href="#caijing">财经</a>
<!--给名为comName的组件占位，comName在Vue实例的data中赋值 -->
<component :is='comName'></component>
</div>
<script>
//定义组件
let zhuye = {
template:'<div>主页信息</div>'
}
let keji = {
template:'<div>科技信息</div>'
}
let caijing = {
template:'<div>财经信息</div>'
}
//Vue实例
let vm = new Vue({
el:'#app',
data:{
//动态数据
comName:'zhuye'
},
//注册组件，当键值对的名一样时，可以直接写一个
components: {
zhuye, //'zhuye':zhuye
keji,
caijing
}
})
//监听hash的值
window.onhashchange = function() {
console.log(location.hash)
//把hash的值赋给comName，实现组件的变换
vm.comName = location.hash.slice(1)
}
</script>
</body>
实现效果：
点击主页，在url的后缀加了#zhuye，并显示名为zhuye的内容
点击科技，在url的后缀加了#keji，并显示名为keji的内容
点击财经，在url的后缀加了#caijing，并显示名为caijing的内容
并在控制台显示点击不同的链接不同的hash。
核心思路： 在页面中有一个vue实例对象，vue实例对象中有三个组件，分别是tab栏切换需要显示的组件内容 在页面中有三个超链接，如下：
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件，然后得到当前hash值，根据这个hash值来让不同的组件进行显示。
网友评论