vue-router笔记

最新推荐文章于 2024-10-07 10:17:30 发布
原创 最新推荐文章于 2024-10-07 10:17:30 发布 · 120 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍Vue Router中的三种导航模式：hash、history及abstract，并解析各模式的特点及应用场景。hash模式兼容性最佳但URL含有#号；history模式依赖HTML5 History API且需服务器配置支持；abstract模式则确保所有JavaScript环境下可用。

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入门到精通系列之五》--- vue-router详解_vue-router beforeeach和aftereach
2401_85158697的博客
07-12 931
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
Vue-Router基础学习笔记(小结)
12-10
2. **引入和注册**：在Vue应用中，首先需要导入Vue和VueRouter，然后通过`Vue.use(VueRouter)`来全局注册Vue-Router。 3. **链接跳转**：在模板中，我们可以使用`<router-link>`组件创建可点击的导航链接，例如`...
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 基于abstract 路由模式 实现页面内嵌
j_bleach的博客
12-13 5602
abstract 路由模式 abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。 路由示例 export const routes = [ { path: "/", redirect: "abstra
用Vue编写抽象组件的方法
細水、長流√的专栏
09-08 652
今天学习Vue源码时，看到抽象组件，以前用过，但是不知道叫抽象组件在Vue中，像这些都是内置的抽象组件，抽象组件和普通的组件类似，只是他们添加额外的行为，不向DOM呈现任何内容。有点像中的高阶组件当然我们也可以实现自己的抽象组件首先实现抽象组件，不用设置template，否则Vue会优先渲染tempplate里面的东西，就不能额外添加行为了实现自己的<debounce>抽象组件创建好组件后，使用的时候，和普通组价一样的使用方法局部使用。
如何抽象一个Vue公共组件
08-29
主要介绍了如何抽象一个Vue公共组件，以一个数字键盘组件为例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue的路由实现：hash模式 和 history模式 abstract模式
qq_38935512的博客
08-15 8150
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实现原理
孤云博客
02-28 949
转自：https://segmentfault.com/a/1190000018584560 随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、加博主微信（guyun297890152）可以进入微信技术交流群、QQ技术交流群(183198395)。 近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录...
前端 - history
kelly0721的博客
10-09 1380
一、History的几个基本方法 back()：回退到上一个访问记录; 在历史记录中后退：window.history.back(); forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward(); go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1)...
前端学习笔记
最新发布
weixin_50361560的博客
10-07 1989
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 模式 `‘hash‘ | ‘history‘ | ‘abstract‘` 的区别
m0_65461467的博客
08-10 364
react-router 有三种模式，设计上和 vue-router 一样。url 中的 hash ，是不会发送给 server 端的。但是从不关心后端，只关心前端页面的用户，或者浏览器来看，更喜欢。即无论什么 url 访问 server ，都要返回该页面。所以，从开发者的实现角度来看，前端路由是一个违反规则的形式。更易理解，前者顾名思义，后者就过于抽象。代码参考 history-api.html。替换为 API 的形式，但功能是一样的。Vue-router v4 升级之后，
Vue-router 学习之路
Romky的博客
11-20 914
vue-router 的使用（入门篇
细谈 vue - 抽象组件实战篇
weixin_33737134的博客
06-08 2143
本篇文章是细谈 vue 系列的第五篇，这篇的内容和以前不太一样，这次属于实战篇。对该系列以前的文章感兴趣的可以点击以下链接进行传送 《细谈 vue 核心- vdom 篇》 《细谈 vue - slot 篇》 《细谈 vue - transition 篇》 《细谈 vue - transition-group 篇》 前两篇我们分别分析了 <transition> 和 <tran...
Vue利用Vue.extend()实现自定义弹出框
onlyRose914的博客
01-16 4202
container层html（遮罩层） &lt;template&gt; &lt;transition name="dialog"&gt; &lt;div class="container" v-show="visible" @click="maskClose"&gt; &lt;div class="conten
掌握Vue-router：从入门到实战技巧
VueRouter是Vue.js官方提供的路由管理器，它与Vue.js无缝集成，使得构建复杂的SPA变得简单。其主要特性包括： 1. **嵌套路由/视图关系**：支持多级路由配置，便于组织和管理不同层级的页面结构。 2. **模块化和组件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值