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文档
猜你喜欢
  • vue前端路由机制怎么实现
    这篇文章主要讲解了“vue前端路由机制怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue前端路由机制怎么实现”吧!一. 前端路由现代前端开发中最流行的页面模型,莫过于SPA单页应用...
    99+
    2023-07-04
  • vue-router前端路由之如何实现路由传值
    小编给大家分享一下vue-router前端路由之如何实现路由传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!路由传值在前端的路...
    99+
    2024-04-02
  • 从vue-router看前端路由的两种实现
    目录模式参数 HashHistory HashHistory.push()HashHistory.replace()监听地址栏HTML5History 两种模式比较 his...
    99+
    2024-04-02
  • vue中单页应用如何实现前端路由
    这篇文章将为大家详细讲解有关vue中单页应用如何实现前端路由,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。通常 SPA 中前端路由有2种实现方式:window.histo...
    99+
    2024-04-02
  • 前端配合后端实现Vue路由权限的方法实例
    目录前言实现思路代码实现登录本地路由列表生成路由挂载路由总结前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由。这就是我们通常所说的动态路由权限...
    99+
    2024-04-02
  • flutter 路由机制的实现
    目录实现基础 _routeNamed _flushHistoryUpdates add push pop remove 总结 整个 flutter 应用的运行都只是基于原生...
    99+
    2024-04-02
  • Vue3纯前端实现Vue路由权限的方法详解
    目录前言RBAC模型代码实现登录菜单信息动态路由筛选总结前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由。这就是我们通常所说的动态路由权限,实...
    99+
    2024-04-02
  • vue中前端路由的原理是什么
    vue中前端路由的原理是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一. 前端路由现代前端开发中最流行的页面模型,莫过于...
    99+
    2024-04-02
  • 如何使用director.js实现前端路由
    这篇文章主要介绍了如何使用director.js实现前端路由,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。director.js是什么? 理...
    99+
    2024-04-02
  • vue嵌套路由怎么实现
    本文小编为大家详细介绍“vue嵌套路由怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue嵌套路由怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。用 Vue CLI 进行设置如果尚未安装,请运行以...
    99+
    2023-07-04
  • 怎么用原生js代码实现前端简易路由
    这篇文章主要讲解了“怎么用原生js代码实现前端简易路由”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用原生js代码实现前端简易路由”吧!路由到底是一个什么东西路由(routing)就是通...
    99+
    2023-06-30
  • React中的前端路由怎么用
    这篇文章主要讲解了“React中的前端路由怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React中的前端路由怎么用”吧!一. url是什么访问不同url, 展示不同的组件二. 使用步...
    99+
    2023-06-30
  • vue如何实现路由权限控制
    这篇“vue如何实现路由权限控制”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现路由权限控制”文章吧。在Vue中...
    99+
    2023-07-06
  • 怎么用vue实现动态路由
    这篇文章主要介绍了怎么用vue实现动态路由的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用vue实现动态路由文章都会有所收获,下面我们一起来看看吧。1、什么是动态路由?动态路由,动态即不是写死的,是可变的。...
    99+
    2023-07-02
  • vue前端路由以及vue-router两种模式实例详解
    目录前言1、什么是前端路由(1)后端路由阶段(2)前后端分离路由阶段(3)单页面应用阶段2、vue-router 提供了 hash 和 history 两种路由模式(1)hash模式...
    99+
    2024-04-02
  • vue路由守卫如何限制前端页面访问权限
    这篇文章主要介绍vue路由守卫如何限制前端页面访问权限,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下:router...
    99+
    2024-04-02
  • vue中怎么实现路由传参
    本篇文章为大家展示了vue中怎么实现路由传参,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。在vue路由中,支持3中传参方式。场景,点击父组件的li元素跳转到子组件中...
    99+
    2024-04-02
  • 前端面试官常问的问题:如何实现前端路由?
    前端面试官常问的问题:如何实现前端路由? 前端开发是近年来蓬勃发展的领域,技术的不断更新也让前端开发人员面临着更多的挑战与机遇。在前端开发面试中,前端路由是一个经常被问及的话题之一。实...
    99+
    2024-04-02
  • vue怎么实现路由懒加载
    这篇文章主要介绍了vue怎么实现路由懒加载,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。路由懒加载写法: // 我所采用...
    99+
    2024-04-02
  • Vue路由前后端设计的示例分析
    这篇文章主要介绍Vue路由前后端设计的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、 官网demo这里不得不吐槽一下官网,写的不清不楚的,在哪里使用都没有说清楚,几行代码...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作