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是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢各位的阅读，以上就是“vue前端路由机制怎么实现”的内容了，经过本文的学习后，相信大家对vue前端路由机制怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！