vue2路由为什么要重写push

Vue2路由重写push方法是因为原生的push方法在路由跳转时，如果目标路由和当前路由相同，会报错。而重写push方法可以避免这种情况的发生，同时也可以实现一些其他的功能，比如记录路由历史等等。

另外，重写push方法也可以让路由跳转的过程更加灵活，可以添加一些自定义的逻辑来控制路由跳转的行为。例如，可以在路由跳转前进行身份验证或者权限判断，以确保用户有权限访问目标页面。

相关问题

vue-router重写push方法

### 回答1：
Vue-Router提供了一个beforeEach钩子函数，可以在路由跳转前进行拦截和处理。我们可以在这个钩子函数中重写Vue-Router的push方法，实现自定义的路由跳转逻辑。

具体实现步骤如下：

1. 在Vue-Router的路由配置文件中，定义一个beforeEach钩子函数。

2. 在beforeEach钩子函数中，重写Vue-Router的push方法。

3. 在重写的push方法中，实现自定义的路由跳转逻辑。

例如，我们可以在push方法中添加一些额外的逻辑，比如记录路由跳转历史、判断用户是否登录等等。

示例代码如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 重写Vue-Router的push方法
  const originalPush = Router.prototype.push
  Router.prototype.push = function push(location) {
    // 自定义的路由跳转逻辑
    console.log('路由跳转：', location)
    originalPush.call(this, location)
  }
  next()
})

export default router

在上面的示例代码中，我们在beforeEach钩子函数中重写了Vue-Router的push方法，并添加了一个console.log语句，用于记录路由跳转历史。当路由发生跳转时，会先执行beforeEach钩子函数，然后再执行重写后的push方法。

需要注意的是，在重写push方法时，我们需要先保存原始的push方法，然后再调用它，否则会导致路由跳转失败。

### 回答2：
Vue-router是Vue.js的官方路由库，它允许我们通过在URL上切换视图组件来构建单页应用程序。Vue-router提供了router.push方法来实现路由跳转，但是我们有时候想要在跳转时添加一些额外的逻辑，这时候可以重写push方法。

重写Vue-router的push方法可以在路由跳转前、中、后添加额外的逻辑，例如记录页面访问带来的效果，页面跳转时弹出确认框等。下面是一个简单的例子：

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ]
});

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.log('路由跳转出错', err);
    }
  });
};

上面的例子中，我们先保存了VueRouter原型链上的push方法，然后重写了push方法。在重写的push方法中，我们调用了原来的push方法，并通过catch方法捕获路由跳转出错的情况。在出错时，我们判断出错信息是否为‘NavigationDuplicated’，如果不是则打印错误信息，否则忽略错误。这样就可以在路由跳转时添加额外的逻辑了。

总之，重写Vue-router的push方法是一个非常简单但实用的技巧。通过重写push方法，我们可以在路由跳转时添加额外的逻辑，保证页面的正常跳转，并记录页面的状态，为以后的页面分析带来帮助。

### 回答3：
vue-router是Vue.js官方的路由管理插件，它提供了一种管理页面路径的方式。vue-router可以用来实现页面之间的跳转、参数传递等功能。

在Vue.js中使用vue-router时，我们通常使用$router.push方法来实现页面跳转。这个方法可以接收一个路由信息对象作为参数，例如：

this.$router.push({
  name: 'user',
  params: { userId: 123 }
})

上述代码中，我们通过$router.push方法跳转到了名为"user"的路由，并且传递了一个userId参数值为123。

然而，在某些情况下，我们可能需要对$router.push方法进行重写，以实现一些特定的功能。比如，我们可能需要在跳转前先进行一些判断或处理操作，或者我们可能需要记录用户的行为日志。

在Vue.js中，我们可以通过Vue.mixin方法来实现全局的$router.push方法重写。具体步骤如下：

1. 创建一个混入对象，包含一个名为push的方法。这个方法将在$router.push方法被调用时执行。

const routerMixin = {
  methods: {
    push (location) {
      console.log('router push:', location)
      // 执行相关处理操作
      return this.$router.push(location)
    }
  }
}

如上述代码所示，我们在push方法中打印了要跳转的路由信息，并对路由信息进行了一些处理操作（这里仅作示例）。

2. 调用Vue.mixin方法将混入对象添加到Vue的全局配置中。

Vue.mixin(routerMixin)

调用上述代码后，我们就成功地将push方法重写为我们自定义的方法。在应用程序中调用$router.push方法时，一旦被覆盖的push方法被执行，就会触发我们自定义的操作。

需要注意的是，在push方法中，我们需要返回原始的this.$router.push(location)语句来确保$router.push方法继续起作用。

总结起来，通过重写$router.push方法，我们可以实现对页面跳转的控制和管理。这种操作可以使我们方便地实现一些自定义的需求，并增强我们的应用程序的交互性和可扩展性。

el-menu router 模式重写路由的push方法

el-menu 是饿了么团队开源的一款基于 Vue.js 的饿了么 UI 组件库，它提供了一些可以用于创建响应式导航菜单的组件。而 router 模式指的是使用 Vue Router 进行页面路由管理。

如果我们需要重写 el-menu 的 router 模式下的 push 方法，我们可以通过 Vue Router 的 beforeEach 钩子函数来实现。具体步骤如下：

1. 首先，在 main.js 中引入 Vue Router，并创建一个实例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // 配置路由表
})

// 在此处重写 push 方法
router.originalPush = router.push;
router.push = function(location) {
  // 你的自定义逻辑，例如记录路由跳转日志
  // ...
  // 调用原始的 push 方法
  router.originalPush(location);
};

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2. 接下来，在 beforeEach 钩子函数中重写 push 方法：

router.beforeEach((to, from, next) => {
  // 你的自定义逻辑，例如记录路由跳转日志
  // ...
  // 调用原始的 push 方法
  router.originalPush(to);
});

通过以上步骤，我们就成功地重写了 el-menu 路由的 push 方法。这样就可以在路由跳转时执行一些自定义逻辑，例如记录日志，或者对路由进行一些额外处理。