vue3.0 模拟VueRouter history模式

最新推荐文章于 2024-08-09 18:28:42 发布
最新推荐文章于 2024-08-09 18:28:42 发布
阅读量321 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43016472/article/details/118516940
版权
本文详细介绍了如何在Vue3.0中模拟VueRouter的history模式，从VueRoute的构造函数和install方法，到router-link组件的render实现，再到router-view的动态加载组件和监听路由变化，最后通过initEvent方法存储并初始化路由。
摘要由CSDN通过智能技术生成

实现前分析
核心代码
在这里插入图片描述
VueRoute是通过Vue注册的插件，需要有一个静态的install方法
在这里插入图片描述

构造函数

在这里插入图片描述
创建router-link组件,router-link就是一个a标签，vue-cli创建的项目，默认使用的是运行版本的vue，所以不能识别template，可以使用完整版本vue，详见https://cli.vuejs.org/config/#vue-config-js，这里使用render实现编译
在这里插入图片描述
定义init方法
在这里插入图片描述
注册插件时调用
在这里插入图片描述
router-v

最低0.47元/天 解锁文章
拉勾小迷弟
关注
Vue3：路由的两种模式history模式和hash模式
Brave_heart4pzj的博客
03-21 1872
Vue
Vue3中的history模式路由：打造无缝导航体验！
最新发布
Jacklx888的博客
08-10 558
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
Vue3.0路由将哈希(hash)更改为历史(history)模式
IU
04-03 1272
Vue3.0路由将哈希(hash)更改为历史(history)模式
vue3.0 router在history模式下服务器配置问题
JingDengLai的博客
06-11 647
1. 打包部署在服务器根目录 客户端在项目中的vue.config.js 配置 module.exports = { publicPath: '/' } 服务器配置，以Nginx服务器实例 爬坑1：通过vue官方文档，我们知道在服务器配置文件中去配置 location/{try_files$uri $uri/ /index.html;} 但是会弄错去配置哪个文件，我在/conf/nginx.conf中搞了很久都不行，都快要放弃的时候，我看到了conf/vhost/0localho
vue-router3 路由搭建
m0_75222154的博客
04-12 207
src根目录下创建router文件夹，并且创建index.js文件。在main.js中引入router。index.js文件写入下面代码。App.vue中配置下面代码。Vue3版本安装路由命令。让整个应用都使用路由。
vue3.0中如何使用router路由、vuex、element-plus
JCat的博客
06-01 3362
前言 vue3 已经出来大半年了，之前一直没有项目可以实际上手使用，这次刚好有机会，并且 vue3 已经可以和 element-plus 配合起来稳定开发了！那么就来一起用用 vue3（这篇对比 vue2 主讲如何使用，之后再探究原理），其实说 vue3 最好的教程就是vue3 官网，官网写的很好，都可以照着官网和现成的案例直接学习! 当然，在 vue3 中也可以书写 vue2 的语法，我不想写成完全的初级教程，所以会选择性的写我认为重要的，很基础的东西大家有需要可以评论留言~ 正文 这里使用 vue3 +
详解如何去除vue项目中的#——History模式
08-29
要使用 History 模式，需要在 VueRouter 的实例中将 mode 设置为 'history'。例如： ```javascript const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 这样，VueRouter 就会使用 History ...
Vue3.0项目实战+ElementUI从入门到实战
m0_67390788的博客
03-09 6273
课程地址:Vue3.0项目实战2021｜Vue差异化对比+实操公司后台管理系统｜零基础入门前端开发教程(C#/.Net/Vue基础/Vue3技术入门讲解/Vue实战)_哔哩哔哩_bilibili https://www.bilibili.com/video/BV17V411j76p?p=1 ElementUI从入门到实战【升职加薪，只争朝夕】-学习视频教程-腾讯课堂 https://ke.qq.com/course/3547529 零.开篇介绍 Vue3 vs Vue2 Vue-cli构建Vue3项目 .
模拟window的history对象
weixin_30808253的博客
07-15 81
window的history是历史条目对象，在浏览器里，历史条目是保存在一个历史记录栈里，并通过go()等一系列函数进行操作。 最近遇到一个项目，主要需求是HTML页面放到App里，App包含一个webView来显示HTML，并提供两个按钮，一个关闭按钮（关闭webView并返回app其他界面），一个是后退按钮，后退页面，也就是浏览器的后退按钮。需求要求所有页面不能跳转，也就是需要通过...
【vue3|第20期】vue3中Vue Router路由器工作模式
Commas的博客
08-09 1112
Web 页面的工作方式是通过 HTTP 请求从服务器获取HTML文档，然后由浏览器解析并显示内容。随着 Web 应用的发展，特别是单页应用（SPA）的流行，需要在不重新加载整个页面的情况下，更新页面的部分内容。Vue Router 支持多种工作模式，每种模式都有其特定的使用场景和配置方式。本文将详细介绍 Vue Router 的三种工作模式：Hash 模式、HTML5 History 模式 和 Abstract 模式。
【vue3】vue3中路由hash与History的设置
amoureux555的博客
10-27 942
vue3中路由hash与History的设置
vue-router的两种模式
wangpachong的博客
12-08 192
1.利用url的hash ,:hash虽然出现在URL中,但不会出现在HTTP请求中,因此改变hash不会重新加载页面 2.HTML的history模式,它使url看起来更想普通网站那样,以’/’,没有#,页面没有跳转,不过需要服务端支持,服务端接收到所有请求后,都只向同一个html,不然出现404’ ...
vue3路由Router的配置和跳转
kimi
03-13 6296
vue3路由Router的配置和跳转
vue3项目中实现动态路由
热门推荐
m0_74331185的博客
04-17 1万+
完成效果 第一步：配置静态路由 第二步实现登录和安全守卫 第三步：发送请求获取用户动态菜单 配置二级动态 刷新导致动态路由匹配不到 直接 404 第五步设置菜单数据缓存 最后实现最终效果
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用
akkigg的博客
02-08 3937
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(usRouter)的使用 路由懒加载、路由分包处理、魔法注释的使用 路由跳转 NotFount页面配置
vue3切换路由模式——Hash 、histoary
weixin_44192389的博客
09-10 2935
hash 对应 createWebHashHistory。history 对应 createWebHistory。使用createWebHashHistory。使用createWebHistory。1、history模式。
关于vue3 history相关问题解决方案
yyh231366的博客
03-27 2436
我实际操作了一下,我觉得有必要纠正一下,在实际开发种,实际上,可能我的上一章节匹配,会出现一些小问题 他会告诉你,你匹配的方式不对,不能用这种方式!于是你就去找,正则匹配方式,然后利用重定向 这次系统又会告诉你,栈溢出问题,我们先看栈溢出啥意思 在代码中的某个地方，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。这几乎总是因为具有未满足的基本情况的递归函数 这是官方说的一句话,不过其实好像自己懂了,又好像没懂,假设说我们用的是重定向,你这个时候,确实跟上面的说的一样,其实
Vue3.0结合vue-router与element-plus的初步实践
"这篇文档是关于使用Vue3.0、vue-router和element-plus进行前端开发的初步实践。文档提到了Vue3.0的主要优势，包括性能优化、组合式API以及更好的TypeScript支持，并介绍了如何使用@vue/cli创建项目，设置路由，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值