[JavaScript知识库]尚品汇项目实战第二天

第二天

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下注册局部组件