vue之路由相关

一、路由跳转方式

• KV键值对(K–key代表URL；V–value代表相应的路由组件)
• $route一般获取路由信息，例如路径、query、params；$router一般进行编程式导航路由跳转
• 路由分为声明式导航和编程式导航

<router-link to="/home"></router-link>//声明式导航
this.$router.push()//编程式导航

二、组件的显示与隐藏

//第一种--不好
<Footer v-show="$router.path==='/home'"></Footer>
//第二种--一般使用这个
在routes中加meta：{show:true}
v-show="$router.meta.show"

三、传参情况

• params属于路径当中的一部分，需要注意的是在配置路由的时候需要占位；
• query不属于路径当中的一部分，类似于Ajax中的queryString，例如/home?k=v不需要占位

//第一种--纯字符串形式
this.$router.push("/search/"+this.keyword+"?k="this.k)
在结构中{{$route.params.keyword}},{{$route.query.k}}拿到
//第二种--模板字符串
this.$router.push("/search/${ this.keyword }?k=${this.k}")
//第三种：对象形式
前提：在路由routes中添加name属性
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.k}})

四、路由参数相关面试题

1. path是否可以结合params使用 --不可以
2. 如何指定params可传可不传 --配置路由的时候参数已经占位了，如果跳转不传则路径会出现问题，所以在path:”/search/:aa?”加上问号就可有可无
3. params如果传递是空串，如何解决 – 使用undefined解决params可传可不传然后空字符串，keyword:’’||undefined
4. 路由组件能不能传递props数据 --可以(三种)，但一般不用这个，用push

//第一种：布尔形式：前提：传递params，在routes中加props:true,然后在组件中props:['key'],在结构中直接使用{{key}}
//第二种：对象形式：在routes中加props:{a:1,b:2}
//第三种：函数形式：
props:($route)=>{
        return {key:$route.params.key,k:$route.query.k}
      }

五、push重新加工

1. 为什么： 编程式路由跳转到当前路由(参数不变)，多次执行会抛出NavigationDuplicated的错误警告；
2. 引出： 但是这种对于声明式导航就没问题，因为vue-router底层已经处理好了，原因在于最新的vue-router引入了promise，所以push中再传入两个参数一个是成功的，一个是失败的，就可以解决这样的错误()=>{},()=>{},成功的、失败的回调函数，但是治标不治本，将来在别的组件中，编程式导航还是有类似错误，还得加这两个参数，多是个push就得加2倍多；
3. 原理：this.$router.push() 中this指向当前组件VueComponent实例；this.$router属性：当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由，给组件实例添加的时候；push：VueRouter类的一个实例，总结就是let $router=new VueRouter(),而push是VueRouter上原型的一个方法，即VueRouter.prototype.push=function(){//函数的上下文是VueRouter 类的一个实例}
4. 做法：需要重写这个push(在注册那里)–replace也一样

let originPush= VueRouter.prototype.push;
VueRouter.prototype.push=function(location,resolve,reject){
    if(reaolve&&reject){
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,()=>{},()=>{})
    }
}