VUE路由相关知识点

1、路由跳转的方式

声明式导航：router-link（必须有to属性，当组件过多时，会出现卡顿现象）

编程式导航：利用路由组件的$routet.push | replace方法。

声明式导航能实现的，编程式导航都能实现。

2、路由传参，参数的2种写法

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query参数：不属于路径当中的一部分，类似于ajax中的queryString

3、如何指定parmas参数可传可不传？

（如果路由要求传递params参数，但你没传，那么路由跳转URL会出问题）

在配置路由的时候，在占位符的后面加上一个问号

path:'/search/:keyword?'

4、params参数可传可不传，如果传递为空串，如何解决？

（即使在占位符的后面加一个问号，船体参数为空串时，URL依旧会出问题）

使用undefined来解决

this.$router.push({
    name:'search',
    params:{
        keyword:''||undefined
    }
})

5、路由组件能不能传递props数据？

可以，有3种写法

//1.布尔值（这种方法只能传params参数）
props：true, 

//2.对象写法
props:{a:1,b:2}

//3.函数写法（params和query参数都可）
props:($route)={
    return {keyword:$route.params.keyword}
}

6、编程式路由跳转到当前路由（参数不变），多次执行会抛出NavagationDuplicated的警告错误？

（声明式路由没有这个问题，因为vue-router底层已经处理好了）

解决方法：

1. 通过push方法传递相应的成功和失败的回调（治标不治本）

this.$router.push({
    name: 'search',
    params: {
        keyword: this.keyword,
    },
    () => {},
    () => {}
})

2.封装方法

let originPush =VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
VueRouter.prototype.push =function (location,resolve,reject){
    ...
}