vue中 vue-router的路由的2种模式 （原生js模拟演示）

最新推荐文章于 2024-07-23 16:00:30 发布
最新推荐文章于 2024-07-23 16:00:30 发布
阅读量237 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45802159/article/details/104307565
版权
本文探讨了Vue Router的两种主要路由模式——hash模式和history模式。通过原生JavaScript模拟演示，详细解释了它们的工作原理及应用场景。
摘要由CSDN通过智能技术生成

hash模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
最低0.47元/天 解锁文章
上头upup
关注
专栏目录
vue路由(一)介绍与实现简单的模拟路由
jianggeye7485的博客
08-25 311
一、什么是路由 路由就是对应关系。分为两大类： ① 后端路由 请求方式、请求地址与function处理函数之间的对应关系。 ② 前端路由 Hash地址与组件之间的对应关系。 工作方式： ①用户点击了页面上的路由链接 ②导致了URL地址栏中的Hash值的变化 ③前端路由监听了到Hash地址的变化 ④前端路由把当前Hash地址对应的组件渲染到浏览器中 二、SPA与前端路由的关系 在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！ 三、模拟实现简单的路由 <template> &l
【vue-router】---原生js实现两种路由模式
qq_53061847的博客
05-28 9910
目录 一、hash模式 二、history模式 三、hash模式和history模式的区别 我们在vue中用的路由其实也是用原生的js封装的，本文总结两种路由模式的原生写法，总结两者的实现的原理和区别 Vue两种前端路由（hash模式和history模式）实现原理解析及区别 一、hash模式 hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的
模拟vue-router
weixin_44169058的博客
02-28 158
学习笔记 原型 import Vue from 'vue' import VueRouter from './routers.js' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // ro
【Vue实战教程】之 Vue Router 路由详解
最新发布
柯晓楠
07-23 2303
用Vue.js创建的项目是单页面应用，如果想要在项目中模拟出来类似于页面跳转的效果，就要使用路由。其实，我们不能只从字面的意思来理解路由，从字面上来看，很容易把路由联想成“路由器”。路由器的功能用一句话来概括，就是连接两个或多个网络的硬件设备。我们所说的路由，是指在一个应用程序中链接多个页面（组件）的一种配置，在一个全栈项目中，路由分为前端路由和后端路由。后端路由先来看一下后端路由，例如项目的服务器地址是页面1，地址 http://192.168.1.10:8080/index.html。
原生 js 实现一个前端路由 router
weixin_33768481的博客
01-29 1008
效果图： 项目地址：https://github.com/biaochenxuying/route 效果体验地址： 1. 滑动效果： https://biaochenxuying.github.io/route/index.html 2. 淡入淡出效果： https://biaochenxuying.github.io/route/in...
vue-router vue路由 的简单例子演示
weixin_34075551的博客
06-08 142
vue-router vue路由 的简单例子演示jsfiddle.net/yyx990803/x…
vue-router-路由
博客
01-14 45
目录前言安装一个简单的demoMain和Content组件配置路由index.js挂载路由main.jsApp.vue效果图 前言 项目地址：https://gitee.com/cnleika/vue-learning/tree/master/notebook/11-router vue-router主要用于实现路径跳转， 我们在ssm和springboot中有用到过@RequestMappin...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
Vue Router 是 Vue.js 官方的路由管理器，版本4.x 对应的是与 Vue3.x 兼容的新版。它负责处理应用的导航和页面间的通信，使得单页应用（SPA）能够根据 URL 进行状态管理和页面切换。 在这个"vue3.x+vite+ts+vue-...
uni-crazy-router:一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子
03-21
一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子 qq群：701697982 注意 由于条件限制，仅在H5环境和微信小程序环境，以及app端android和ios环境进行过测试感谢某...
vue history路由模式设置虚拟路径
qq_42339350的博客
08-11 1401
都会去访问 xx.com/home/www/hgdoor。改为 xx.com/hgdoor/userlist 进行访问。意思为所有的 xx.com/hgdoor。如果是本地运行项目，那么到此就结束了。期望 xx.com/userlist。
Vue Router 模拟 - 嵌套路由
皮蛋很白的博客
07-28 387
vue-router 模拟嵌套路由 vue-router 源码 src 目录结构 components link.js router-link组件 view.js router-view组件 history 历史管理，包含3个模式 hash.js - hash模式 html5.js - history模式 abstract.js - 服务端渲染时使用的抽象模式 base.js - 上面3个模式的父类，提供一些公共的内容 errors.js - abstract.js使用的方法 util 存放一
模拟vue动态路由
m0_50441807的博客
08-30 360
先说明下router这个实例对象下的addRoutes方法：这个方法传入一个数组，其实就是一个新的路由表单，它不会覆盖掉原来旧的路由表单，而是采用合并的原则，类似于React中的setState方法；以上只是一个demo，router.addRoutes方法在这里是不能用的，因为没有router实例，只是方便大家理解，具体还是应用在vue项目中。...
Vue实现高效前端路由——手动模拟路由
qq_35149975的博客
03-16 626
不光后端可以实现路由，前端也可以，开启前端路由时代
虚拟路由--微前端-qiankun
u010707194的博客
06-10 831
微前端 虚拟路由 qiankun
Vue 路由使用方法详解：从基础到高级
m0_58013334的博客
08-19 2697
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
vue利用空白页进行路由刷新
04-08 808
// 这里需要使用replace ,防止浏览器记录历史 // 使用页面，在methods中添加函数 refresh () { this.$router.replace({ path: '/refresh', query: { t: Date.now() } }) } // refresh.vue <script> export d...
【vue 路由模式】
shfjcncjn的博客
09-23 612
vue 路由模式
Vue+Vuex+Vue-router：实现代理动画与购物商城开发
该商城项目采用了Vue CLI作为基础脚手架，结合vue-router进行路由管理，Vuex进行状态管理，通过axios进行数据请求，mock.js用于模拟后台数据，确保前端开发时的快速迭代。 设计上，项目采用了相对定位而非固定定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值