前端项目第一天-route|router，v-show|v-if的区别，声明式路由|编程式路由

一、route|router

• route：一般获取路由信息【路径、query、params等等】，一般是写在路由文件夹中的index.js文件中
• router：一般进行编程式导航进行路由跳转【push|replace】
• 声明式导航router-link,可以进行路由的跳转

<router-link to="地址">内容 </router-link>`

• 编程式导航push|replace，可以进行路由的跳转，声明式导航能做的，编程式导航都能做，编程式导航还能做一些其他业务,在方法中添加（比如说填写表单后再跳转）

const 方法= (data){
//其他函数体
router.push('跳转的页面')
}

router.push({
        // 当前的路径
        path:route.path,
        // 查询参数
        query:...
    })

二、v-if|v-show

• v-if是直接操作dom元素
• v-show是操作样式，就是display:none
• 从效率来讲，v-show比v-if更高效

三、其他问题

（1）路由传递参数（对象写法）path是否可以结合params参数一起使用？
答：路由跳转传参时候，对象写法可以是name、path形式，但是需要注意的是，path这写法不能结合params参数一起使用，只能传参，不能跳转至想要的页面。
（2）如何指定params参数可传可不传？
比如：配置了具有的时候，占位了（params参数），但是路由跳转的时候就不传递。路径会出现问题
答：如何指定params参数可传还是不可传，在配置路由的时候，在占位的后面加上一个？

 path:'/search/:keyWord?',

（3）params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
答：使用undefined解决：params参数可传递、不传递（空字符串）

params:{keyWord:this.keyWord||undefined},

（4）路由组件能不能传递props数据
答：可以，且有三种写法

• 布尔值

   props:true

• 对象写法

  props:{ a:1, b:2}

• 函数写法:可以params参数、query参数，通过props传递给路由组件

props:($route)=>({keyWord:$route.params.keyWord,k:$route.query.k})