快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

vue中前端路由的原理分析

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

成都网站制作、网站设计,成都做网站公司-成都创新互联公司已向1000多家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

一. 前端路由

现代前端开发中最流行的页面模型,莫过于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路由的原理。

     
  • index
  •  
  • item
  •  
  • list
  •  
 
 
 
头部
   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 = 'Hello World'  }, 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中前端路由的原理分析
标题网址:http://6mz.cn/article/jpepoe.html

其他资讯