vue-router的原理？catch方法的实现原理

最新推荐文章于 2023-07-13 14:27:12 发布
最新推荐文章于 2023-07-13 14:27:12 发布
阅读量3.7k 收藏
点赞数
分类专栏： vue 文章标签： vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzrxLXR/article/details/81480183
版权

问题网址:http://bbs.daxiangclass.com/?thread-29.htm
解决方案:
用户通过vue的router.push和router.replace来修改地址栏。同时监控地址栏。获取到对应组件，去配置信息里面寻找对应的页面显示

vue的两种模式

hash模式

这种 # ,也就是hash值的变化不会导致浏览器向发送请求,每次hash值的变化都会触发一个hashchange的事件,通过监听这个事件来实现页面更新部分内容的操作

history模式

用了 HTML5 的实现，单页路由的 url 有一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面时，浏览器还是会给服务器发送请求。所以这个需要服务器支持，把所有路由都重定向到根页面(index页面)。

catch方法的实现原理

catch是用来做编程异常处理,他会判断你的语句是否有错误,有错误就会返回错误

mzrxLXR
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-Router的基本原理
前端初学者
03-31 3790
Vue-Router的使用原理，路由实现的两种模式以及优缺点
Vue-Router的原理
y1314999的博客
11-24 344
原理： vue-router的原理就是更新视图而不重新请求页面。 Hash模式： 默认是hash模式，基于浏览器history api，使 用window.addEventListener('hashchange',callback,false) 对浏览器进行监听，当调用push时，把新路由添加到浏览器访问历史 的栈顶。使用replace时，把浏览器访问历史的栈顶路由替换成新路由。 hash值等于url#及其以后的内容。浏览器时根据hash值得变化， 将页面加载到相应得DOM位置。锚点得变化.
Vue-Router与原理
m0_73442777的博客
04-18 1578
Vue Router的原理是基于浏览器的History API，即HTML5中新增的History接口，通过这个API可以在浏览器中动态修改URL，并在不刷新页面的情况下实现页面的切换。Vue Router基于History API提供了一个组件化的路由管理解决方案，可以方便地进行路由的配置和管理。
vue-router 原理
AIROU_ao的博客
12-02 1724
用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，最重要的是改变 URL 中的 hash 部分不会引起页面刷新。vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
超详细的vue-router原理
jiangjialuan2的博客
05-17 7384
vueRouter是前端路由，在无需刷新页面的情况下更新视图。 两种模式：一种是Hash模式，一种是History模式。分别就是在HTML5History，HashHistory两个类中实现的。 一、vue-router组成 vue-router组件有三个部分 1.link：即v-link 2.view：元素指令，即 3.router：核心部分 二、vue-router简单的一个流程 1.url 变化 2.history监听（onChange事件）：window.addEventListener(‘hash
vue-router重写push方法,解决相同路径跳转报错问题
10-14
为了解决这个问题，我们需要重写Vue-Router的`push`方法。 首先，我们要导入Vue和Vue-Router库： ```javascript import Vue from 'vue' import Router from 'vue-router' ``` 然后，我们需要保存Vue-Router原型链...
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
这个错误的出现是由于Vue-Router从3.1.0版本开始，`push`和`replace`方法开始返回Promise对象，如果导航失败（比如在`beforeRouteEnter`钩子中进行了重定向或者阻止了导航），Promise会被拒绝，而如果没有处理这个...
vue-router的HTML5 History 模式设置
10-18
const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 在这种模式下，URL 将呈现为常规的 Web 服务器风格，如 `http://yoursite.com/user/id`。然而，由于浏览器会尝试从服务器获取与该 URL 相...
Vue-router 报错NavigationDuplicated的解决方法
11-21
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js ...const originalReplace = VueRouter.prototype.rep
区分vue-router的hash和history模式
10-14
Vue Router 是 Vue.js 应用中的官方路由库，它提供了两种模式...总的来说，Vue Router 的 hash 和 history 模式各有优劣，理解它们的工作原理和适用场景，可以帮助开发者做出最佳选择，以构建高效、用户体验优秀的SPA。
VueRouter
qq_35381464的博客
11-17 144
1.什么是VueRouter? VueRouter和v-if/v-show一样,是用来切换组件的显示的 v-if/v-show是标记来切换(true/false) VueRouter用哈希来切换(#/xxx) 比v-if/v-show强大的是VueRouter不仅仅能够切换组件的显示,还能够在切换的时候传递参数 2.VueRouter使用 2.1导入VueRouter 2.2定义路由规则 2.3根据路由规则创建路由对象 2.4将路径对象挂载到Vue实例中 2.5修改URL...
路由404匹配catchAll
weixin_44707050的博客
07-13 807
catchAll是一个vue router路径配置中的路径表达式 ， 使用通配符参数语法 ， 用于匹配所有未匹配到其他路由的路径。:冒号前缀，表示可匹配任何路径片段，(.*)是一个正则表达式，用于匹配零个或多个任意字符，包括斜杠。一般会用于404页面或动态路由的功能；
vue-router报错
qq_45142260的博客
02-17 1973
vue路由报错，vue-router 报错内容：Catch all routes ("*") must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
qq_51402804的博客
03-09 1791
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
探索Vue.js底层源码——响应式的数据对象原理
五柳
11-11 297
响应式对象     在 Vue 中响应式的原理是基于 ES5 的 Object.defineProperty（而 Vue 的响应式原理是基于 ES6 中的 Proxy）。 数据初始化     在 Vue 的初始化过程中，数据初始化的完成是由 initState 执行的，initState.js 定义在 src/core...
router中push的几种用法,catch方法的实现原理
qq_47443027的博客
03-23 5938
router中push的几种用法 路由设置部分 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import main from '@/components/main' import one from '@/components/one' import two from '@/components/two' import three from.
Vue.js 运行机制全局概览
乐夫天命兮的博客
09-19 607
全局概览 这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程，当把整本小册认真读完以后，再来阅读这一节，相信会有收获的。 首先我们来看一下笔者画的内部流程图。 大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对Vue.
Vue路由升级导致的错误
像一阵风
10-16 387
Uncaught (in promise) 解决方法一：在调用方法的时候用catch捕获异常 this.$router.replace({ name: 'foo' }).catch(err => { console.log('all good') }) 方法二： 对Router原型链上的push、replace方法进行重写，这样就不用每次调用方法都要加上catch。这个方法是vue-...
vue-常见错误解决
热门推荐
云簪阁
09-01 1万+
1.运行vue时浏览器报错Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option 原因：被引用的组件页面没有进行export，导致寻找不到浏览器...
vue2和vue3vue-router的区别
最新发布
08-30
而在Vue2中，如果路径不匹配routes中的任何路由配置，可以通过配置一个catch-all路由来处理notFound情况。 综上所述，Vue2和Vue3的Vue Router在引入方式上有差异，并且在路由匹配和notFound处理方面也有一些区别。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值