This is the 12th day of my participation in Gwen Challenge

1. Why do V-for add key

- Add key= to the list loop in vue"Unique identifier"The unique identifier can be the ID index in item, etc., because vUE components are highly reusable, adding keys can identify the uniqueness of components. In order to better distinguish the functions of each component Key, the main purpose is to"Update the virtual DOM efficiently"- Note: if the key is not unique, it will report an error directly, and the mobile side will render confusion. - Bug encountered: iphone11 assignment rendered with checkbox and input missing and rendered with no key.Copy the code

2. Five ways to redirect routes:

Query is passed with path and params is passed with name

1, the router – the link

<! -- Use the router-link component to navigate through the incoming`to`Property specifies the link, and <router-link> is rendered as one by default`<a>`Tags - > < the router - link: to = "{name: 'home', params: {id: 1}}" > < the router - link: to = "{name: '/ home', the query: {id:1}}"> // Note: if a router-link starts with a '/', it starts with the root route. If a router-link does not start with a '/', it starts with the current route.Copy the code

Router. Push (programmatic routing)

    router.push({ name: 'name'.params: { id: '123' }})
    / / into/the name? id=1
    router.push({ path: 'name'.query: { id: '1' }})
Copy the code

3, this.$router.push()

this.$router.push({path:'/home'.query: {id:'1'}})
this.$router.push({name:'home'.params: {id:'1'}}) 
Copy the code

4, enclosing the router. The replace () / / usage with push5. Above this. The router. The replace () / / usage with push 5 above. Push5.this.router. Go (n) push5.this.router. Go (n) push5.this.router.

this.$router.go(n) // Jump forward or backward n pages, n can be a positive or negative integer
Copy the code

Route push, replace, and go:

  • Push jumps to the specified URL path and wants to add a record to the history stack. Click back to return to the previous page
  • Replace: redirects to the specified url path, but there is no record in the history stack. If you click back, it will redirects to the previous page.
  • Go: indicates that n pages are forwarded or forwarded. N can be a positive or negative integer

Query and Params:

  • Query is similar to get. After a jump, the page URL will be concatenated with parameters. Id =1, non-important can pass like this, refresh the page ID is still there

  • Params is similar to POST. After the jump, no parameter will be spliced after the page URL, but the page ID will disappear after refreshing, and important data such as password will be transferred.