Vue-router is a routing system that emerged with the Vue framework, and it is also recognized as an excellent routing solution. When using Vue-router, we often use its own path jump component Link to achieve jump, which is very similar to the traditional one! But what are the specific differences between them?
The official explanation is as follows:
<router-link> is better than writing a dead <a href="..." rel="external nofollow" rel="external nofollow" > for the following reasons:
Whether it is HTML5 history mode or hash mode, its behavior is consistent, so when you want to switch routing mode or downgrade using hash mode in IE9, no changes are required.
In HTML5 history mode, router-link guards the click event, so that the browser no longer reloads the page.
After you use the base option in HTML5 history mode, all to attributes need not be written (base path).
Uh, I can only say that the blogger didn’t understand it for the first time when he first studied (it should be because his previous basic knowledge was not solid, it seems that he would have to make up for it later), so I went to check it out by myself:
<a href="..." rel="external nofollow" rel="external nofollow" >
The tag a is explained in W3C:
The <a> tag defines a hyperlink that is used to link from one page to another.
Jump from one page to another, but from this point of view it violates the concept of a multi-view single-page web application
Jump through the a tag, the page will be rerendered, which is equivalent to reopening a new web page, which is reflected in visual "flashing" (it is basically impossible to see if it is a local project)
router-link
The <router-link> component supports users to navigate in applications with routing capabilities (click) . Specify the target address through the to attribute, and render it to a <a> tag with the correct link by default. You can generate other tags by configuring the tag attribute.
Jumping through router-link will not jump to a new page, nor will it be re-rendered. It will select the component referred to by the route for rendering, avoiding the "useless work" of repeated rendering.
Summarize:In contrast, the router-link component avoids unnecessary re-rendering, it only updates the changed parts to reduce DOM performance consumption
Vue's innovation is that it uses the concept of virtual DOM and diff algorithm to achieve "on-demand update" of pages.
Vue-router inherits this very well, and re-rendering is something we don't want to see, because no matter which page you jump to, it only takes one rendering. The <Link> component helped us realize this wish
On the other hand, the <a> tag has to be re-rendered every time it jumps. How terrible it is in a huge project! Our "rendering" does a lot of "useless work" and consumes a lot of precious DOM performance!
Supplementary knowledge:Use the route router-link in vue to include a tag
When router-link is used in vue to include a tag, a tag will replace routerlink's value to achieve jump.
<div class="list" v-for="(item,index) in listName" @click="toDetail()">
<p>{{}}</p>
<p>{{}}</p>
<p>{{}}rice</p>
<a :href="getUrl()" rel="external nofollow" rel="external nofollow" >icon{{}}</a>
</div>
<!--<router-link :to="{path:'detail',query:{id:}}" tag="div" class="list" v-for="(item,index) in listName" @click="toDetail()">
<p>{{}}</p>
<p>{{}}</p>
<p>{{}}rice</p>
<a :href="getUrl()" rel="external nofollow" rel="external nofollow" >icon{{}}</a>
</router-link>-->
The following routerlink tag will replace router-link usage
You can use div to add click events
2 When implementing a href="tel:1325425652" rel="external nofollow" in vue, use the method of: href="tel" rel="external nofollow" + variables directly.
Can be encapsulated using function
getUrl(tel){
return "tel:"+tel;
},
The above article discusses the difference between router-link and traditional A link in VUE in detail. It is all the content I share with you. I hope you can give you a reference and I hope you can support me more.