什么是路由？
在计算机网络中，路由的概念是分组从源到目的地时，决定端到端路径的网络范围的进程，做成硬件叫路由器，在路由器中维护着一个路由表，并根据此路由表决定下一跳的地址。
什么是前端路由？
路由是根据不同的 url 地址展示不同的内容或页面，就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。
什么时候使用前端路由？
在单页面应用中，大部分页面结构不变，只改变部分内容的使用。
单页面应用
单页面应用（SPA）就是请求这个url地址，切换到另一个url地址，发现url地址栏会发生变化，但是页面无须进行刷新，用户体验较好，例如网易云音乐换歌时歌名发生变化，页面并未刷新。
路由的hash模式和history模式
hash模式
- hash模式中，url后面的#虽然会出现在url中，但不会被包含在http请求中，对后端完全无影响。
- 当hash改变时，会触发hashchange事件，监听此事件，对页面进行刷新。
window.onhashchange = function() {
document.getElementById("content").text = 123456;
}
history模式
- history模式利用了html5 history interface新增的pushState()和replace方法，用于记录浏览器的记录栈。
- history模式在back、forward、go等的基础上，可以修改浏览器的历史记录，发出请求后，虽然改变了url，但浏览器不会立即向后端发出请求。 pushState()、replaceState() 方法接收三个参数：stateObj、title、url
history.pushState({color: "red"}, "red", "red")；//设置状态
window.onpopstate = function(event) { //监听状态
if(event.state && event.state.color === "red") {
document.body.style.color = "red"; //更新页面内容
}
}
- history.back()、history.go(number)、history.forward()是可以直接使用提供的API
两种模式的区别
- history在地址栏上没有#，比较好看一些
- 刷新回车操作时，hash模式会加载到地址栏上对应的页面，但history模式会报404（找不到页面），需要向后端请求
- hash模式支持低版本的浏览器，而history模式是HTML5新增的API，不支持低版本浏览器
- hash模式不出现在http请求中，对页面不影响，不会重载页面，适用于单页面
- history模式的pushState和replaceState()方法需要浏览器的支持，虽然有更改历史记录的功能，却不会立马向后端发请求
vue中路由（vue-router）
<div id="app">
<!-- 在el里给路由匹配组件占位 -->
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>这是登录组件</h1>
</div>
</template>
<template id="reg">
<div>
<h1>这是注册组件</h1>
</div>
</template>
<script>
//1.声明组件,模板对象
var login = {template : '#login'};
var reg = {template : '#reg'};
//2.创建路由对象
var router = new VueRouter({
routes: [
//声明路由匹配规则
{
path:'/login',component:login
},
//组件写模板对象名字
{path:'/reg',component:reg}
]
})
var vm = new Vue({
el:'#app',
//3、路由对象挂载到vm身上
// router:router
router
})
</script>
前端路由的优缺点
-
优点 用户体验好，不需要每次都从服务器全部获取，快速展现给用户
-
缺点 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
