VUE项目爬坑---3、vue route的编程式导航

VUE项目爬坑---3、vue route的编程式导航

一、总结

一句话总结：

router.push(location, onComplete?, onAbort?)：router.push('home')

编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
#router.push(location, onComplete?, onAbort?)

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

1、一定要区分 this.$route 和 this.$router 这两个对象？

this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它

this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

// 使用JS的形式进行路由导航
// 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
// 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
// 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

console.log(this);
// 1. 最简单的
// this.$router.push("/home/goodsinfo/" + id);
// 2. 传递对象
// this.$router.push({ path: "/home/goodsinfo/" + id });
// 3. 传递命名的路由
this.$router.push({ name: "goodsinfo", params: { id } });

2、小球动画在不同屏幕和尺寸下的思路（从起始位置到终点位置的动画）？

用dom.getBoundingClientRect()来获取xDis和yDis

// 小球动画优化思路：
// 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经局限在了某一分辨率下的 滚动条未滚动的情况下；
// 2. 只要分辨率和 测试的时候不一样，或者 滚动条有一定的滚动距离之后， 问题就出现了；
// 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
// 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
// 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()

// 获取小球的 在页面中的位置
const ballPosition = this.$refs.ball.getBoundingClientRect();
// 获取 徽标 在页面中的位置
const badgePosition = document
  .getElementById("badge")
  .getBoundingClientRect();

const xDist = badgePosition.left - ballPosition.left;
const yDist = badgePosition.top - ballPosition.top;

el.style.transform = `translate(${xDist}px, ${yDist}px)`;
el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";

3、子组件向父组件传值了（事件调用机制）？

事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法

4、物品的库存数据（做加入购物车的限制的时候）我们是ajax拿的，但是不知道什么时候可以拿到，那我们应该怎么做？

用watch方法来监听库存数据

  props: ["max"],
  watch: {
    // 属性监听
    max: function(newVal, oldVal) {
      // 使用 JS API 设置 numbox 的最大值
      mui(".mui-numbox")
        .numbox()
        .setOption("max", newVal);
    }
  }

二、内容在总结中

博客对应课程的视频位置：