1.12

 路由传参

最常用对象写法

**传递params参数 需要配置name 不是path**

1:如何指定params参数可传可不传?

路由要求传参 并且已经占位 但是没有传递参数 路径会出现问题

在占位的时候在后面加上问号 解决路径问题

2:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?

使用undefined解决 keyword:''|| undefined

 重写push replace

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。

这种异常,对于程序没有任何影响的。

为什么会出现这种现象:

由于vue-router最新版本,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,

**第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调**

第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病;

 

//先把VueRouter原型对象push先保存一份  push方法存在于VueRouter的原型对象上
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

//重写push|replace
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject)
    {  //call方法调用可以改变this指向问题 this指向实例而不是window
        originPush.call(this,location,resolve,reject)
    }
    else{
        originPush.call(this,location, () => {}, () => {})
    }
    
}
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject)
    {
        originReplace.call(this,location,resolve,reject)
    }
    else{
        originReplace.call(this,location, () => {}, () => {})
    }
    
}

# Home组件

## 拆分组件

一共要拆分为七个组件 (左侧三级联动 轮播以及快报 优质好货 热卖排行 猜你喜欢 家用电器以及手机通讯 各大公司)

### 三级联动

在Home Search Detail都使用 可以注册为全局组件

## 发请求获取服务器数据进行展示

## 开发动态业务

拆分组件:结构+样式+图片资源

 注册为全局组件 在home里面直接使用 不需要引入

//将三级联动注册为全局组件
import TypeNav from './pages/Home/TypeNav/TypeNav'
//参数为 组件的名字 哪个组件
Vue.component('TypeNav', TypeNav)

遗留问题:将TypeNav注册为全局组件后 在home中使用 没有效果 局部引入也没有效果 

在App中尝试局部引入 可以 但是必需使用条件渲染 尝试很长时间 还是不知道为什么全局注册 在

home中无法使用 (啊啊啊啊啊 为什么呀)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值