1, Summary
One sentence summary:
router.push(location, onComplete?, onAbort?): router.push('home')
Programming navigation
In addition to using < router link > to create a tag to define the navigation link, we can also use router's instance method to implement it by writing code.
#router.push(location, onComplete?, onAbort?)
//String
router.push('home')
//Object
router.push({ path: 'home' })
//Named route
router.push({ name: 'user', params: { userId: '123' }})
//With query parameter, / register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
1. Do you have to distinguish this.$route and this.$route?
this.$route is the parameter object of the route. All parameters in the route, params and query, belong to it
this.$router is a routing [navigation object], which can be used to conveniently use JS code to realize routing forward, backward and jump to a new URL address
// Use JS Route navigation in the form of // Note: be sure to distinguish this.$route and this.$router These two objects, // Among them: this.$route It is the route [parameter object], all the parameters in the route, params, query All belong to it // Among them: this.$router It is a routing [navigation object], which can be used conveniently JS Code to realize the route forward, backward and jump to the new URL address console.log(this); // 1. The simplest // this.$router.push("/home/goodsinfo/" + id); // 2. Transfer objects // this.$router.push({ path: "/home/goodsinfo/" + id }); // 3. Passing named routes this.$router.push({ name: "goodsinfo", params: { id } });
2. How does the ball animation work on different screens and sizes (animation from start to end)?
Get xDis and yDis with dom.getBoundingClientRect()
// Small ball animation optimization ideas: // 1. First, we analyze the essential reasons for the inaccuracy of animation: we have limited the position of the ball to a certain resolution when the scroll bar is not rolling; // 2. As long as the resolution is different from that of the test, or the scroll bar has a certain rolling distance, the problem will appear; // 3. Therefore, after analysis, we come to the conclusion that the horizontal and vertical coordinates of the position can not be written down directly, but should be calculated dynamically according to different situations; // 4. After analysis, we get the solution: first get the horizontal and vertical coordinates of the logo, then get the horizontal and vertical coordinates of the ball, and then let y Value difference, x The result is the distance to be displaced in the abscissa and ordinate // 5. How to get the location of logo and ball??? domObject.getBoundingClientRect() // Get the position of the ball in the page const ballPosition = this.$refs.ball.getBoundingClientRect(); // Get the location of the logo in the page 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. Did the child pass values to the parent (event call mechanism)?
The essence of event call: pass method from parent to child, call this method from child, and pass data to this method as parameter at the same time
4. The inventory data of items (when we add the limitation of shopping cart) is taken by ajax, but we don't know when we can get it, so what should we do?
Monitoring inventory data with watch method
props: ["max"], watch: { // Property listening max: function(newVal, oldVal) { // Use JS API Set up numbox Max of mui(".mui-numbox") .numbox() .setOption("max", newVal); } }
2, Content in summary
Video location of corresponding courses of Blog: