一、路由
简单来说,路由就是URL到函数的映射。
在 Web 服务的程序中,不同路径对应着各自的处理逻辑,程序会把请求交给路径所对应的处理逻辑,这样就完成了一次「路由分发」,这个分发就是通过「路由」来完成的。
以前路由都是后台做的,通过用户请求的url导航到具体的html页面,前端路由就是通过配置js文件,把这个工作拿到前端来做。
简单的说,路由是根据不同的 url 地址展示不同的内容或页面
二、后端路由:
对于服务器来说,当接收到客户端发来的HTTP请求,会根据请求的URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。
三、前端路由
前端路由的映射函数通常是进行一些DOM的显示和隐藏操作。当访问不同的路径的时候,会显示不同的页面组件。前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。
1.基于hash实现的前端路由
在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 hash 来实现的话,它的 URI 规则中需要带上 #。
1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat
Web 服务不会解析 hash,也就是说 # 后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash 读取到的,读取到路径加以解析之后就可以响应不同路径的逻辑处理。(重点)
window.onhashchange = function() {
var hash = window.location.hash
var path = hash.substring(1)
switch (path) {
case '/':
showHome()
break
case '/users':
showUsersList()
break
default:
show404NotFound()
}
}
hash有以下几个特性:
- hash仅仅是客户端的一个状态,也就是说,当向服务器发请求的时候,hash部分并不会发过去。
- hash值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
触发hsah变化的两种方式:
- 通过a标签,并设置href属性,当用户点击这个标签后,URL就会发生改变,也就会触发hashchange事件了:
<a href="#srtian">srtian</a>
- 直接使用JavaScript来对loaction.hash进行赋值,从而改变URL,触发hashchange事件:
location.hash="#srtian"
2.基于history API实现的前端路由
history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。
1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat
例子:
window.history.pushState(state, title, url)
其中state和title可以为空,url中填上/ 、/about、/concat
前端路由的使用场景
前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。
前端路由优缺点
- 优点
1)从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。
2)在某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户复制到的地址不能反映这些变化,用前端路由做单页面网页就很好的解决了这个问题,即把变化反映在url中。 - 缺点
使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。(查资料做进一步了解)
四、Vue-router库
页面中所有的内容都是组件化的,只需要把路径跟组件对应,在页面中把组件渲染出来。
1.页面实现:在vue-router中, 它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分, 定义显示部分。
2.js中配置路由:首先要定义route,一条路由的实现,他是一个对象,由path和component组成。
这里的两条路由,组成routes:
const routes = [
{// 首页
path: '/',
component: () => import('src/pages/home/index.vue'),
},
{// 首页更多功能
path: '/functionManage',
component: () => import('src/pages/home/functionManage.vue'),
},
]
创建router对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。
router.js文件中
const router = new VueRouter({
routes,
})
配置完成后,把router 实例注入到 vue 根实例中。
main.js文件中
window.vm = new Vue({
router,
})
执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 标签所在的地方。
前端路由是通过改变URL,在不重新请求页面的情况下,更新页面视图。
参考:
https://zhuanlan.zhihu.com/p/24814675
https://www.cnblogs.com/yuqing6/p/6731980.html
//www.greatytc.com/p/d2aa8fb951e4
https://juejin.im/post/5b08c9ccf265da0dd527d98d