Vue重学之路---------二

9、路由组件的显示与隐藏

在Home、Search显示Footer

在登录注册时隐藏的，消失的

v-if|v-show ：v-if操作Dom在节点树上是真有真没有，v-show只是display：none

因为频繁显示隐藏，使用v-show

不推荐的做法：可以使用组件身上的$route获取当前路由信息，通过路由路径判断Footer的显示与隐藏

  <Footer v-show="$route.path=='/home'||$route.path=='/search'">Footer>
?

推荐(路由元数据)：在配置路由的时候可以添加路由元数据【meta】，路由需要配置对象，它的key不能瞎写乱写

 {
     path:"/home",
     component:Home,
     meta:{show:true}
  },

10、路由的跳转方式

1、声明式跳转导航

router-link (务必要有to属性)、可以实现路由的跳转

2、编程式跳转

利用的是组件实例的$router.push|replace方法,可以实现路由的跳转。（可以书写一些自己的业务）

11、路由传参

参数的几种写法：

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

2、query参数：不属于路由当中的一部分，类似于ajax中的queryString 带？的形式

        //路由传参
          //1、字符串形式
          //  this.$router.push('/search/'+this.keyword+"?k="+this.keyword.toUpperCase())   //点击搜索进行页面
          //2、模板字符串
          //this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
          //3、对象  一般使用这种方式，注意需要在router配置的js文件里面配置name
          this.$router.push({
            name:"search",
            params:{keyword:this.keyword},
            query:{k:this.keyword.toUpperCase()}
          })
        }

12、路由传参相关面试题目

1、路由传递参数(对象写法)path是否可以结合params参数一起使用？

答：路由跳转传参的时候，对象的写法可以是name、path形式，但需要注意的是，path这种写法不能与params参数一起使用

2、如何指定parmas参数可传可不传

//配置路由的时候 parmas参数已经占位了，但是路由跳转的时候就不传递，路径(URL)会出现问题
this.$router.push(name:"search",query:{k:"asdas"})  
?
//正确解法
//在配置路由的时候在parmas参数后面加上【?】
 {
  path:"/search/:keyword?",  //加上？表示这个params参数可传可不传
  component:Search,
  meta:{show:true},
  name:"search"
  },

3、params参数可以传递特可以传递，但是如果传递的是空串如何解决？

//传递空串，路径(URL)会出现问题 
//解决方案：使用undifiend解决
 this.$router.push({
            name:"search",
            params:{keyword:''||undifined},
            query:{k:this.keyword.toUpperCase()}
          })

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

答：可以

//三种写法
1、布尔值写法，在router配置js文件中,只有params参数能够使用props接收，不常用
    
//传递：使用传递params参数方式传递
        {
            path:"/search/:keyword?",  //加上？表示这个params参数可传可不传
            component:Search,
            meta:{show:true},
            name:"search",
            props:true
          },
   //接收：
    props:["keyword"]
?
2、对象写法，在router配置js文件中,不常用
        {
            path:"/search/:keyword?",  //加上？表示这个params参数可传可不传
            component:Search,
            meta:{show:true},
            name:"search",
            props:{a:1,b:2}
          },
?
3、函数写法，可以params参数，query参数，通过props传递给路由组件
    {
            path:"/search/:keyword?",  //加上？表示这个params参数可传可不传
            component:Search,
            meta:{show:true},
            name:"search",
            props($route)=>{
               (
                    {   
                        keyword:$route.params.keyword,
                        k:$route.query.k
                    }
               )             
            }
          },

13、重写push和replace方法

重写原因：编程式路由跳转到当前路由（参数不变），多次执行会抛出NavgationDuplicated错误

声明式跳转没有这类问题，因为vue-router已经处理好了

为什么会有这个问题：因为push和replace使用promise封装，跳转完之后没有指定回调函数所以会报错，但是不会影响程序的执行

解决方案

1、指定两个空的回调函数,治标不治本，将来在别的组件中使用push|replace编程式导航还是有类似的错误

this.$router.push({
            name:"search",
            params:{keyword:''||undifined},
            query:{k:this.keyword.toUpperCase()}
          },()=>{},()=>{})

2、封装，重写push|replace

this:当前组件实例 （search）

this.$router属性：这个属性的属性值是VueRouter的实例对象，当在入口文件注册路由的时候，给组件添加$router|$route属性

push：VueRouter原型对象的方法 VueRouter.property.push=function(){}

具体实现，在路由js文件当中添加如下代码

//1、备份原方法
let originPush=VueRouter.prototype.push;
let originRepalce=VueRouter.prototype.replace;
//重写push|replace
//第一个参数：告诉原来push方法，你往那里跳、传递那些参数
VueRouter.prototype.push=function(location,reslove,reject){
  if(reslove&&reject){
    originPush.call(this,location,reslove,reject);
  }else{
    originPush.call(this,location,()=>{},()=>{});
  }
}
VueRouter.prototype.replace=function(location,reslove,reject){
  if(reslove&&reject){
    originRepalce.call(this,location,reslove,reject);
  }else{
    originRepalce.call(this,location,()=>{},()=>{});
  }
}