第二天
1. 声明式路由导航 ==>> 即<router-link>
eg： <router-link to='xxx' tag='li'> To PageB </router-link>
注意：<router-link> 会默认解析成 a 标签，可以通过 tag 属性指定它解析成什么标签
编程式路由导航 ==>> 即写js的方式
相关 API：
1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) ==>> 队列的方式
（先进先出）
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) ==>> 栈的方式
（先进后出）
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由
this.$router.back() 返回到上一页
this.$router.forward() 前进到下一页
2.push/replace的辨析
this.$router.push()
跳转到不同的url，但这个方法会向history栈添加一个记录，点击后会返回到上一个页面。
this.$router.replace()
跳转到不同的url，这个方法不会向history栈添加一个记录，点击后会返回到上上一个页面
this.$router.go(n)
向前向后跳转n个页面，n为正数向前跳转n个页面，负数后退n个页面
3. 编程式路由导航跳转时（参数不变），为什么多次执行会抛出NavigationDuplicated异常？怎么解决？
答：在vue-router的底层使用了promise来处理异常，当多次点击时抛出异常是vue的设计。
解决方法1（治标不治本，没有影响底层源码）
在调用push或replace方法跳转路由时，传递两个空箭头函数
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()},},()=>{},()=>{})
解决方法2：重写push和replace方法（在配置路由信息中）
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
// 重写push方法，解决多次点击搜索报错问题
VueRouter.prototype.push = function(location,resolve,reject){
if(resolve && reject){
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,location,()=>{},()=>{})
}
}
// 重写replace方法
VueRouter.prototype.replace = function(location,resolve,reject){
if(resolve && reject){
originReplace.call(this,location,resolve,reject)
}else{
originReplace.call(this,location,()=>{},()=>{})
}
}call和apply的区别
相同点：都可以调用函数一次，都可以篡改上下文
不同点：call和apply传递参数，call传递参数用逗号隔开，apply
方法执行，传递数组。
4.Home组件拆分
书写静态页面（HTML+CSS+图片）
4.1在Home文件夹下创建TypeNavicat（商品导航）：商品导航属于全局组件，方法为
—在Home下创建TypeNavicat文件夹（index.vue）引入Vue样式完成HTML和CSS暴露此组件
—在入口文件中引入并注册全局组件
4.2Home首页其余组件均为局部组件，故只需要在Home下的index.vue注册使用即可，具体步骤为
—在Home文件夹下创建Recommend（推荐），Rank（排名），ListContainer（列表），Like（喜好），Floor,Brand文件夹（index.vue&images）
—在Home下的index.vue下注册局部组件
