vue中前端路由的原理分析

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中前端路由的原理分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[