vue-router笔记

最新推荐文章于 2024-10-07 10:17:30 发布
最新推荐文章于 2024-10-07 10:17:30 发布
阅读量108 收藏
点赞数
分类专栏： vue专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cscscssjsp/article/details/108642335
版权
本文介绍Vue Router中的三种导航模式：hash、history及abstract，并解析各模式的特点及应用场景。hash模式兼容性最佳但URL含有#号；history模式依赖HTML5 History API且需服务器配置支持；abstract模式则确保所有JavaScript环境下可用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.导航模式

三种导航模式hash，history，abstract，

  •  默认是hash，兼容性好，但是会有一个 # 
  • history 只能在支持HTML5 History Api 的浏览器中 ，依赖 HTML5 History API 和服务器配置
  • abstract 支持所有js，如果检测不到浏览器api，则会强制转为这种模式

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致

2.导航方法

  • push -- 向浏览器导航history中添加一个新的地址，如果浏览器点击后退会回到上一个页面
  • replace -- 不会添加新的地址，直接替换当前地址
  • go -- 跳转到指定的地址，写上数字就行
vue 基于abstract 路由模式 实现页面内嵌
j_bleach的博客
12-13 5518
abstract 路由模式 abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。 路由示例 export const routes = [ { path: "/", redirect: "abstra
Vue-router笔记：访问根路由重定向至首页，修改默认路由值为history模式
init_8y0的博客
04-01 4457
文章目录前言一、新建组件1.首页组件Home.vue2.关于组件About.vue3.App.vue二、使用步骤1.配置路由2.导入组件3.效果图总结 前言 Vue-router笔记：访问根路由重定向至首页，修改默认路由值为history模式 一、新建组件 1.首页组件Home.vue <template> <div> <h2>首页组件</h2> </div> </template> <script>
用Vue编写抽象组件的方法
細水、長流√的专栏
09-08 546
今天学习Vue源码时，看到抽象组件，以前用过，但是不知道叫抽象组件在Vue中，像这些都是内置的抽象组件，抽象组件和普通的组件类似，只是他们添加额外的行为，不向DOM呈现任何内容。有点像中的高阶组件当然我们也可以实现自己的抽象组件首先实现抽象组件，不用设置template，否则Vue会优先渲染tempplate里面的东西，就不能额外添加行为了实现自己的<debounce>抽象组件创建好组件后，使用的时候，和普通组价一样的使用方法局部使用。
vue-abstract-api:精益的OOP API抽象层
05-18
Vue抽象API 这是Vue.js的精简API连接器（尽管不依赖它：您可以在任何想要的框架中使用它）。 特征 将端点和资源抽象为可扩展的类 使用类属性的灵活配置 有据可查的可读代码 适应几乎所有API结构 在顶部的轻型层 您可以在这里尝试： 安装 要安装插件，只需npm install 。 npm install vue-abstract-api 为了进行开发/预览示例应用程序（尚未完成，但可以运行）： cd vue-abstract-api npm install npm run build // to build the library npm run example:start // to start the example app on port 8080 npm run example:build // to build the example app 用法 要使用v
如何抽象一个Vue公共组件
08-29
主要介绍了如何抽象一个Vue公共组件，以一个数字键盘组件为例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue的路由实现：hash模式 和 history模式 abstract模式
qq_38935512的博客
08-15 8126
hash模式 和 history模式 众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式特点 1.就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的，所以每次改变hash不会重新请求加载页面 2.hash 改变会触发 hashchange 事件 3.hash变化会被浏览器记录...
Vue-router入门教程笔记
06-27
本教程笔记将深入浅出地讲解Vue-router的基本概念、安装、配置以及实际应用。 1. **基本概念** - 路由（Route）: 路由是URL模式与组件之间的一种映射，当我们改变URL时，Vue-router会根据预定义的路由规则加载相应...
Vue学习笔记进阶篇之vue-router安装及使用方法
08-29
import VueRouter from 'vue-router' // 注册 Vue.use(VueRouter) ``` 然后，我们需要实例化 Vue Router： ```javascript const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component...
Vue-router学习笔记
01-27
Vue-router是Vue.js框架的重要组成部分，它作为官方的路由管理器，使得构建单页面应用程序变得更加简单。Vue-router的核心功能包括： 1. **嵌套的路由/视图表**：允许你创建复杂的路由结构，一个路由可以有多个子...
Vue-Router基础学习笔记(小结)
12-10
2. **引入和注册**：在Vue应用中，首先需要导入Vue和VueRouter，然后通过`Vue.use(VueRouter)`来全局注册Vue-Router。 3. **链接跳转**：在模板中，我们可以使用`<router-link>`组件创建可点击的导航链接，例如`...
vue-router实现原理
孤云博客
02-28 918
转自：https://segmentfault.com/a/1190000018584560 随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、加博主微信（guyun297890152）可以进入微信技术交流群、QQ技术交流群(183198395)。 近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录...
前端 - history
kelly0721的博客
10-09 1236
一、History的几个基本方法 back()：回退到上一个访问记录; 在历史记录中后退：window.history.back(); forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward(); go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1)...
前端学习笔记
最新发布
weixin_50361560的博客
10-07 1872
hash模式：URL 中带有，兼容性好，不需要服务器配置，适合简单项目。history模式：URL 美观，符合现代应用开发需求，但需要服务器配置支持。abstract模式：用于非浏览器环境，适合服务端渲染或测试。通常情况下，在浏览器应用中，hash模式适合无需服务器配置的项目，而history模式则适合希望有更加美观 URL 的现代应用。Vue 2 使用实现响应式，只能劫持已有的属性，不能检测新增或删除的属性。Vue 3 使用Proxy。
Vue的三种路由模式
热门推荐
yiwai6998的博客
11-05 1万+
路由模式解析 这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页
Vue-router 学习之路
Romky的博客
11-20 887
vue-router 的使用（入门篇
细谈 vue - 抽象组件实战篇
weixin_33737134的博客
06-08 2117
本篇文章是细谈 vue 系列的第五篇，这篇的内容和以前不太一样，这次属于实战篇。对该系列以前的文章感兴趣的可以点击以下链接进行传送 《细谈 vue 核心- vdom 篇》 《细谈 vue - slot 篇》 《细谈 vue - transition 篇》 《细谈 vue - transition-group 篇》 前两篇我们分别分析了 <transition> 和 <tran...
Vue番外篇 -- vue-router浅析原理
weixin_34237596的博客
10-18 811
近期被问到一个问题，在你们项目中使用的是Vue的SPA（单页面）还是Vue的多页面设计？ 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么？ 首先我们需要知道vue-router是什么，它是干什么的？ 这里指的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。 换句话说，vue-router就是W...
用 Vue 编写抽象组件
weixin_34341229的博客
05-06 693
看过 Vue 源码的同学可以知道，<keep-alive>、<transition>、<transition-group>等组件 组件的实现是一个对象，注意它有一个属性 abstract 为 true，表明是它一个抽象组件。 Vue 的文档没有提这个概念，在抽象组件的生命周期过程中，我们可以对包裹的子组件监听的事件进行拦截，也可以对子组件进行 Dom 操作，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值