首页 > 其他分享 >vue-router中重写push方法

vue-router中重写push方法

时间:2023-11-07 10:34:43浏览次数:30  
标签:vue location VueRouter 跳转 push router 路由

文章目的:

看到一段代码不理解什么意思,查了一下是为了解决,重复跳转相同的路由,控制台报错。 重写了方法后,能catch异常,不会在控制台报错了。

代码:

Router.prototype.push = function push(location) {
    console.log(location, 'location')
    return routerPush.call(this, location).catch(error => error)
}

解释:

写完路由重复点击路由两次,控制台上就会报错:如上图所示

解决它:代码如下

点击跳转同一个路径
在VueRouter上配置路由跳转,在router中的index.js中加上以下代码,注意加在use之前

import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 解决路由重复跳转错误
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return routerPush.call(this, location).catch(err => { })
};
 
Vue.use(VueRouter)

标签:vue,location,VueRouter,跳转,push,router,路由
From: https://www.cnblogs.com/hxy--Tina/p/17814456.html

相关文章

  • wsl wangEdit 的使用与注意事项( vue2 版本)
    注:vue2版本的nodeJs版本有限制,要是16或者17;1.安装wangEditoryarnadd@wangeditor/editor@wangeditor/editor-for-vue 2.使用示例<template><divstyle="border:1pxsolid#ccc;"><!--工具栏--><Toolbarstyl......
  • Vue.js中如何将v-model与方法绑定
    在Vue.js中,可以使用v-model指令将表单元素的值与Vue实例中的数据属性进行双向绑定。如果你希望将v-model与方法绑定,可以使用计算属性或者自定义指令来实现。使用计算属性:通过定义一个计算属性来处理v-model的绑定,并在需要的时候调用方法。下面是一个示例:<template><d......
  • 如何在Vue.js中添加headers(标头) 使用 axios,单独请求,所有请求 添加请求头
    如何在Vue.js中添加headers(标头)使用axios,单独请求,所有请求添加请求头Vue.js是一个流行的前端框架,它以其简单易用的API和高度可组合的架构而闻名。当你构建一个Web应用时,你通常会使用一个HTTP客户端来与API交互。该客户端可以是一个浏览器内部的XMLHttpRequest,也可以......
  • vue修改http请求头_vue-resouce设置请求头的三种方法
    vue修改http请求头_vue-resouce设置请求头的三种方法本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下:第一种:在Vue实例中设置varvm=newVue({el:'#rrapp',data:{showList:true,title:null},http:{root:'/',headers:{token:tok......
  • vue 2 升级vue3 前端老白
    vue2升级vue3前端老白原文链接:Vue3已经发布,而Vue2到Vue3的升级需要一些注意点。本文将介绍Vue2升级到Vue3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级VueCLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中输入以下命令:npminst......
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局......
  • uniApp:使用vue3+Vite4+pinia+sass技术栈构建(02)-封装api请求
    前言在纯vue3开发的时候,使用axios进行api请求,但在uniapp中还需要安装axios的适配器uniapp-axios-adapter,否则小程序或者app请求不兼容。文档地址uniapp-axios-adapter-DCloud插件市场但在这里我们不使用axios,而是使用uniapp提供的请求方法uni.request进行封装。uni.request方......
  • 基于[email protected]的Vue3 PDF在线预览
    目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装:PdfView.vue父组件调用:index.vue中文配置文件viewer.properties本文参考来自于CSDN作者theMuseCatcher《Vue3PDF预览(vue3-pdf-app)》认识vue3-pdf-appvue3-pdf-app的npm官方链接点我访问vue3-pdf-app的github仓......
  • Vue中nextTick的使用及原理
    在Vue.js中,nextTick方法可以让我们在DOM更新后执行一些操作。通常情况下,在数据发生变化后,Vue.js会异步地更新DOM,这样可以减少不必要的DOM操作,提高性能。但是,有时候我们需要在DOM更新后对页面进行一些后续操作,比如修改元素的样式、设置定时器等,这时候就需要用到nextTick方法。一、ne......
  • vue3.0 + ts 实现上传工厂(oss与cos)
    概述将上传基类命名为MOS(MineObjectStorage)mos.ts代码import{MosType}from'./mosConfig'import{Loading}from'../loading'import{typeBinaryFile,typeMosFile}from'./fileUtil'importtype{PathTemplate}from'./pathTempla......