iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue前端路由机制怎么实现
  • 387
分享到

vue前端路由机制怎么实现

2023-07-04 12:07:15 387人浏览 薄情痞子
摘要

这篇文章主要讲解了“Vue前端路由机制怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue前端路由机制怎么实现”吧!一. 前端路由现代前端开发中最流行的页面模型,莫过于SPA单页应用

这篇文章主要讲解了“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是什么

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

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

--结束END--

本文标题: vue前端路由机制怎么实现

本文链接: https://www.lsjlt.com/news/345013.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • C++ 生态系统中流行库和框架的贡献指南
    作为 c++++ 开发人员,通过遵循以下步骤即可为流行库和框架做出贡献:选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支,实现修复并添加测试。提交...
    99+
    2024-05-15
    框架 c++ 流行库 git
  • C++ 生态系统中流行库和框架的社区支持情况
    c++++生态系统中流行库和框架的社区支持情况:boost:活跃的社区提供广泛的文档、教程和讨论区,确保持续的维护和更新。qt:庞大的社区提供丰富的文档、示例和论坛,积极参与开发和维护。...
    99+
    2024-05-15
    生态系统 社区支持 c++ overflow 标准库
  • c++中if elseif使用规则
    c++ 中 if-else if 语句的使用规则为:语法:if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...
    99+
    2024-05-15
    c++
  • c++中的继承怎么写
    继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中,继承类型包括:单继承:一个子类从一个基类继承。多继承:一个子类从多个基类继承。层次继承:多个子类从同一个基类继承。多层...
    99+
    2024-05-15
    c++
  • c++中如何使用类和对象掌握目标
    在 c++ 中创建类和对象:使用 class 关键字定义类,包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括:公有、受保护和私有。数据成员是类的变量,每个对象拥有自己的副本...
    99+
    2024-05-15
    c++
  • c++中优先级是什么意思
    c++ 中的优先级规则:优先级高的操作符先执行,相同优先级的从左到右执行,括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表,其中赋值运算符具有最低优先级。通过了解优先级,可...
    99+
    2024-05-15
    c++
  • c++中a+是什么意思
    c++ 中的 a+ 运算符表示自增运算符,用于将变量递增 1 并将结果存储在同一变量中。语法为 a++,用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用,后者在表达式求值后递...
    99+
    2024-05-15
    c++
  • c++中a.b什么意思
    c++kquote>“a.b”表示对象“a”的成员“b”,用于访问对象成员,可用“对象名.成员名”的语法。它还可以用于访问嵌套成员,如“对象名.嵌套成员名.成员名”的语法。 c++...
    99+
    2024-05-15
    c++
  • C++ 并发编程库的优缺点
    c++++ 提供了多种并发编程库,满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大;异步库 (std::async) 可异步执行任务,但 api 复杂;协程库 ...
    99+
    2024-05-15
    c++ 并发编程
  • 如何在 Golang 中备份数据库?
    在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包,或第三方包如 github.com/go-sql-driver/mysql。具体步骤...
    99+
    2024-05-15
    golang 数据库备份 mysql git 标准库
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作