vue中 router路由器重复跳转报错

在注册路由器之前,重写原型对象的方法

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
const originaReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originaReplace.call(this, location).catch(err => err)
}

完美解决连续点同一个路径 报错 ,原理就是catch了 

### Vue2 中通过 Router 进行页面跳转的配置 在 Vue2 中,`vue-router` 是实现单页应用(SPA)路由管理的核心工具。以下是关于如何配置 `vue-router` 并实现页面跳转的具体方法。 #### 路由基本配置 首先,在项目中安装并引入 `vue-router` 后,需要创建一个路由实例来定义路径与组件之间的映射关系[^1]: ```javascript // 定义组件 import About from './components/About.vue'; import Home from './components/Home.vue'; // 创建路由对象 const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]; // 初始化路由器 import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', // 使用 HTML5 History 模式替代 hash 模式 routes // (`routes: routes` 的缩写语法) }); export default router; ``` 上述代码展示了如何设置基础路由表以及初始化 `vue-router` 实例。 #### 页面跳转方式 在 Vue2 中可以通过多种方式进行页面跳转,常见的有 `<router-link>` 和编程式的导航两种方式。 ##### 使用 `<router-link>` 这是声明式的页面跳转方式,适合用于模板中的静态链接: ```html <template> <div> <!-- 声明式跳转 --> <router-link to="/about">前往 about 页面</router-link> <br /> <router-link :to="{ name: 'Home' }">前往 home 页面</router-link> </div> </template> ``` 注意:如果希望使用命名路由,则需先在路由配置中指定名称属性: ```javascript { path: '/home', name: 'Home', component: Home } ``` ##### 编程式导航 除了利用 `<router-link>` 外,还可以借助 JavaScript 动态触发页面跳转操作: ```javascript this.$router.push('/about'); // 字符串形式 this.$router.push({ path: '/home' }); // 对象形式 this.$router.push({ name: 'User', params: { userId: 123 }}); // 命名路由带参数 ``` 以上介绍了基于 vue-routerVue2 应用里完成页面切换的基础流程及其主要手段。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值