首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发:vue路由之前端路由的原理

前端开发:vue路由之前端路由的原理

原创
作者头像
用户5827212
修改2019-08-07 15:23:43
9410
修改2019-08-07 15:23:43
举报
文章被收录于专栏:前端入门学习前端入门学习

现在mvvm框架已经火的不成样了,React、Angular和Vue.js的发布让前端工程化成为主流,大前端时代已经到来了,最近接触了vue的前端路由,闲来无事就开始琢磨源码,下面来说说前端路由的原理。

一. 前端路由

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

在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流

二. 两种实现方式

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>
 <h1 class='result'></h1>
 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 = '<h1 style="color: red">Hello World</h1>'
 }, 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路由之前端路由的原理
前端开发:vue路由之前端路由的原理
前端开发:vue路由之前端路由的原理
前端开发:vue路由之前端路由的原理

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一. 前端路由
  • 二. 两种实现方式
  • hash 和 history API对比
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档