vue中前端路由的原理分析

今天小编给大家分享一下vue中前端路由的原理分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一. 前端路由

现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。

二. 两种实现方式

1、hash模式

这里的hash是指url尾巴后的#号及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应id的元素显示在可是区域内。由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

改变#不触发网页加载

http://www.xxxx.com/index.html#location1 
// 改成
http://www.xxxx.com/index.html#location

浏览器不会重新向服务器请求index.html

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'
var hash = window.location.hash // '#qq' 
window.addEventListener('hashchange', function(){ 
 // 监听hash变化，点击浏览器的前进后退会触发
})

下面我来简单实现一个前端路由的封装，大家能很清楚的明白vue路由的原理。

<ul>
 <li><a href="#/">index</a></li>
 <li><a href="#/item">item</a></li>
 <li><a href="#/list">list</a></li>
 </ul>
 <br>
 <br>
 <div>头部</div>
 <h2 class='result'></h2>
 function Router() {
 // 路由储存
 this.routes = {};
 // 当前路由
 this.currentUrl = '';
 }
 Router.prototype = {
 // 路由处理
 route: function (path, callback) {
 this.routes[path] = callback || function(){};
 },
 // 页面刷新
 refresh: function () {
 // 当前的hash值
 this.currentUrl = location.hash.slice(1) || '/';
 // 执行hash值改变后相对应的回调函数
 this.routes[this.currentUrl]();
 },
 // 页面初始化
 init: function () {
 // 页面加载事件
 window.addEventListener('load', this.refresh.bind(this), false);
 // hash 值改变事件
 window.addEventListener('hashchange', this.refresh.bind(this), false);
 }
 }
 // 全局挂载
 window.Router = new Router();
 // 初始化
 window.Router.init();
 let obj = document.querySelector('.result');
 function changeConent (cnt) {
 obj.innerHTML = cnt
 }
 // 匹配路由做相应的操作
 Router.route('/', () => {
 changeConent("当前是首页");
 })
 Router.route('/item', () => {
 changeConent('当前是item页面');
 })
 Router.route('/list', () => {
 // ajax 的数据就可以这样去拼接
 setTimeout(() => {
 obj.innerHTML = '<h2 style="color: red">Hello World</h2>'
 }, 1000)
 })

2、history模式

HTML5规范提供了history.pushState和history.replaceState来进行路由控制。通过这两个方法可以改变url且不向服务器发送请求。同时不会像hash有一个#,更加的美观。

下面先看api

window.history.pushState(state, title, url) 
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但它是修改当前历史记录，而 pushState 是创建新的历史记录
window.addEventListener("popstate", function() {
 // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发 
 
});
window.history.back() // 后退，触发popstate事件
window.history.forward() // 前进，触发popstate事件
window.history.go(1) // 前进一步，-2为后退两步，window.history.length可以查看当前历史堆栈中页面的数量

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？

首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

hash 和 history API对比

以上就是“vue中前端路由的原理分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。