[JavaScript知识库]vue组件的使用（一）---路由

一、路由的设置：跳转另一个组件隐藏另一个组件时

1. 在route里设置meta

{
        path: '/login',
        component: Login,
        meta: {//源设置
            isHidden: true,
        }
    },

2. 用v-show使用在组件上<Footer v-show="!$route.meta.isHidden"></Footer>

设置meta.isHidden为true时，跳转该路由，Footer组件不显示

二、路由的传参种类：params参数和query参数

params参数是属于路径的一部分，在path后面直接写，路由当中匹配的时候，是要照顾到这个参数的。this.$router.push('/search/'+this.keyWord)
传递的params参数，会被路径后面的:xxx匹配，并且xxx就会收集到传过来的params参数。最终这个参数，会被放到当前这个路由对象的params属性当中

query参数是在路径后面，以？分割，？后面的a=b&c=d就是query参数，query参数是不属于路径的一部分，路由匹配的时候，不需要关心这个参数.
不会在匹配的时候占位，但是query参数在匹配的时候也会收集到当前这个路由对象当中的query属性当中

路径改变切换路由组件的过程：
（1）点击了搜索按钮就会调用this.$router.push('/search')或者点击router-link，它里面的to=‘/search’。用户改变路径
（2）当用户改变路径时，这个路径就会到路由器当中的路由数组内部和路由对象的路劲，一个一个往下匹配，匹配不到就继续往下，匹配到，就显示注册的对应路由组件。
（3）切换显示匹配成功的路由组件 ，显示组件的同时会把刚才匹配的路由对象，也放在这个组件的$route当中 this.$route.params.xxx.

三、 路由路径带参数的三种写法

1. 字符串写法

this.$router.push(’/search/’+this.keyword+’?keyword1=’+ this.xxx’)

2. 模板字符串

this.$router.push(‘/search/${this.keyword?keyword1=+ ${this.xxx}`)

3. 对象写法（重点）

this.$router.push({name:‘search’,params:{keyword:this.xxx},query:{keyword1:this.xxx}})

四、路由传参相关
1）跳转路由的2中基本方式
声明式：
编程式：this.$router.push()/replace()
编程式导航比声明式导航更加灵活（内部可以加入自己的逻辑），效果会更好

面试问题

1）Q：编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicate的警告错误，声明式路由跳转内部已经处理

原因：vue-router3.1.0之后，引入了promise语法，如果没有通过参数指定成功或者失败回调函数就返回一个promise且内部会判断如果要跳转的路径和参数都没有变化，会抛出一个失败的promise
解决：
1、在跳转时指定成功或失败的回调函数，或者catch处理错误（不建议）
2、修改Vue原型上的push和replace方法（优秀）
this.$router.push调用的是路由器对象的方法，这个方法并不是路由器实例化对象的方法，而是这个对象原型的方法

/**在router配置文件中修改**/

//将原有的push方法地址，保存起来，后期还能拿到
const originPush = VueRouter.prototype.push
// 修改原型的push
VueRouter.prototype.push = function (location, onResolved, onRejected) {
    // location就是调用this.%router.push传递过来的对象
    if (onResolved === undefined, onRejected === undefined) {
        return originPush.call(this, location).catch(() => { })
    } else {
        return originPush.call(this, location, onResolved, onRejected)
    }
}

2）Q：指定params参数时，可不可以用path和params配置的组合？（对象写法）

如果传递参数只有query参数，没有params参数，那么可以不用name，可以使用path.
如果传递参数有params参数，那么不能使用path，只能用name去配合
query参数都可以配置组合
对象写法，最好写name，因为能随意配合

3）如何让params参数可传可不传

在keyword后面加？path：‘/search/:keyword?’

4）如果指定params和name配合，但是params中数据是一个" "，无法跳转，路径会出问题，不报错

1、不传params参数
2、首先必须在params参数可传可不传的前提下，当传递的参数是空串到时候，传递undefined，就不会出问题
params:{keyword:""||undefined}

5)路由组件可不可以使用props数据

props：是在路由组建当中操作params参数和query参数的简化方法
props:true //会默认的把传递过来的params参数，额外的映射为组件当中的属性去操作
props:{username:''gakki"} //传递一个对象，传递的是额外需要的静态数据，不需要就不要用

props:(route)=>{
 return {
keyword:route.params.keyword,
keyword1:route.query.keyword1,
 }}