开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
接上篇，有了准备工作，就可以开始定义路由了，这里记录了我写项目时遇到的问题以及老师教的一些重要的点。
定义底部路由
设置登录和搜索时显示，最开始是这样<Footer v-show="$route.path=='/home' || $route.path=='/search'"></Footer>
- 优化，用meta：在home和search的路由设置里添加
meta: { show: true }，而登陆注册页面则为false，则原来Footer组件的判断条件更改为<Footer v-show="$route.meta.show"></Footer>
路由的跳转
- 声明式导航 （
router-link：务必要有to属性） - 编程式导航 利用的是组件实例的
$router.push||replace更好用，可以书写自己的业务逻辑
面试题：v-show与v-if区别?
- v-show：通过样式display控制
- v-if：通过元素上树与下树进行操作
面试题:开发项目的时候，优化手段有哪些?
- v-show|v-if
- 按需加载
路由传参
- params参数：属于路径当中的额一部分，路由需要占位，程序就崩了，属于URL当中一部分
- query参数：不属于路径当中的一部分，路由不需要占位，写法类似于ajax当中queryString
/home?k=v&kv=
假设我们要写个param传参，首先路由中路径上要进行占位path: '/search/:keyword'
- 字符串形式
this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase()); - 模板字符串
this.$router.push(/search/{this.keyword.toUpperCase()});` - 对象
this.router.push({name:"search",param:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}});同时路由中加上name：“search（例如）”
面试题1：路由传递参数（对象写法）path是否可以结合params参数一起使用?
不可以：路由跳转传参时，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用。
面试题2：如何指定params参数可传可不传？
如果路由要求传递params参数，但是你就不传params参数，那么url就会出问题，比如本来应该是http://localhost:8080/#/search/... 那么此时就变成了http://localhost:8080/#/?k=QWE可以看到甚至连search路径都没了，所以url出了问题。
- 如何指定？在配置路由的时候，在占位后面加上一个问号
path: '/search/:keyword?'问号就代表params参数可传可不传
面试题3：params参数可传可不传，但是如果传递是空串，如何解决？
使用undefined解决，params参数可以传递、不传递（空字符串） this.$router.push({name:"search",params:{keyword:'' || undefined},query:{k:this.keyword.toUpperCase()}});
面试题4：路由组件能不能传递props数据？
可以
// 布尔值写法
props: true
// 对象写法
props: { a: 1, b: 2 },
// 函数写法：可以params参数，query参数，通过props传递给路由组件
props: ($route) => {
return { keyword: $route.params.keyword, k: $route.query.k };
}
//简写
props:($route)=>({keyword:$route.params.keyword,k:$route.query.k});
以上就是第一天的学习内容，还是有很多细节不可忽略的。
