router编程式导航（push-replace）及同一事件触发多次路由跳转报错

目录

一、路由跳转

二、push与replace的区别

三、路由传参（name-path）

四、多次路由跳转报错

---

一、路由跳转

1. 声明式导航

格式：< router-link :to = “…” >

2. 编程式导航

格式：< router.push(…) > // 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

二、push与replace的区别

1. push：

• 跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面。

2. replace：

• 跳转到指定的URL，替换history栈中最后一个记录，点击后退会返回至上一个页面。（A-->B-->C 结果B被C替换 A-->C）
• 设置replace属性（默认值：false）的话，当点击时，会调用router.replace()，而不是router.push()，于是导航后不会留下history记录。即使点击返回按钮也不会回到这个页面。加上replace: true时，它不会向 history 添加新纪录，而是跟它的方法名一样——替换当前的history记录。

三、路由传参（name-path）

push和replace都用两种方式进行传参（name或者path） 格式如下：

1. name

push({

    name: '命名路由'，

    params: {      

        key:value

    }，

    query: {

        key:value

    }

})

2. path     只能query

push({

    path：'/路径'，

    query: {

        key:value

    }

})

上面是以对象形式进行跳转和传参，而字符串和模板字符串的形式进行跳转，书写不方便，并不推荐

 具体使用方法，看看下面的例子：

 handleRouter(id){
         //方法一：
         this.$router.push({
                name: 'Detail',
                params:{
                    myid: id,
                },

                /*或者query: {
                    myid: id
                }*、
            }) 

             //方法二：
            /*this.$router.push({
                path:'/detail',
                query:{
                    myid: id,
                }
            })  */    
        } 

name和path两种方法，其路由配置也不同：

 // 对应方法一：
    {
        path:'/detail/:myid?', 
        name:'Detail',
        component: Detail
    },

    // 对应方法二
   /*  {
     path: '/detail',
     component: Detail,
    }, */

 注意：push以name方式跳转时，params的key值，需和路由配置中该路径上的占位符一致。

两种传参的区别：

name：

• 能进行params和query传参
• 路由需要配置 “命名路由”，path路径需要跟占位符
• params：{key：value}中key值需要跟路由中占位符名一致
• query没有key值限制

注意后面跟？ 表示路由跳转时，可以不用传参。

path：

• 只能进行query传参 ， params传参无效
• 路由不需要配置 命名路由、占位符

四、多次路由跳转报错

编程式导航有个问题，在vue-router："^3.5.3" 引入promise，如果用上面push方式进行路由跳转，同一个事件触发多次会报错

handleRouter(val){
  let a =this.$router.push({
    name: 'home',
    params: {
      title: val
    }
  })
  console.log(a)   //promise
}

解决方法：传入两个函数，分别对应resolve，rejust

push( { path(name):'/路径', query:{key:value} },()=>{},()=>{} )  

 设想每次调用push，都要传入两个函数，很麻烦。 如果传与不传都不报错岂不快哉 ，那就需要重写push方法了

思路分析：

通过 console.log(this.$router) 发现它是个VueRouter对象，说明this.$router是VueRouter类的实例，push方法是在原型对象中

 所以我们要在VueRouter实例化时，重写push方法（那就是在router路由文件中重写）

// 在路由配置文件
improt Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push

// 重写push方法

//@parame:location 跳转路径相关参数

VueRouter.prototype.push = function(location,resolve,resolve){
        if (resolve || resolve) {
          // originPush原本指向window
          originPush.call(this,location,resolve,resolve)
        } else {
          originPush.call(this,location,()=>{},()=>{})
        }
}
// 引入组件
......
exprot defalt new VueRouter({
  // 配置路由
  ......
})

这样我们就可以不参两个函数，实现一劳永逸了。