vue中前端路由的原理是什么-创新互联

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路由的原理。

     
  • 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中前端路由的原理是什么-创新互联
文章分享:http://scyanting.com/article/eoccd.html