vue router-view explains in detail

The hyperlink tag in vue1.0 is still the sameaTag, link address byv-linkAttribute control

The hyperlink tag in vue 2.0 isaThe tag has been replacedrouter-linkTags, but in the end, they will still be rendered as a tag on the page.

There is still a reason for why a is replaced with router-link. For example, the structure in the nav navigation we have always used before is (ul>li>a). router-link can be rendered as any element. It can be directly rendered to a li tag, which can also achieve the jump effect, saving the use of a tag. Another reason may be because a tag is normally a link jump. When clicking a, the page may be reloaded. Using router-link, this tag will be listened to by vue, and the page will not be refreshed when jumping to the link. Of course, this person understands that the wrong thing is expected to be corrected.

"router-link" attribute

1.":to" attribute

Equivalent to the "herf" attribute in the a tag, followed by the jump link

<router-link :to="/home">Home</router-link>
<!--Rendering results-->
<a href="/home">Home</a>

2. "replace" attribute

After the replacement is added in the router-link tag, no history will be left when the page is switched.

<router-link :to="/home" replace></router-link>

3. "tag" attribute

The router-link with tag attribute will be rendered into the corresponding tag

<router-link :to="/home" tag="li">Home</router-link>
<!--Rendering results-->
<li>Home</li>

At this time, the li of the page will also play a result of a link redirection, vue will automatically bind the click event to it and jump to the page

4. "active-class" attribute

This property is to set the class attribute when the link is activated, that is, all links matching the current address of the current page will be added to the class attribute.

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

active-classThe default value of the attribute isrouter-link-active, so if it is not set, it will be rendered as this class

Can be set inside

const router = new VueRouter({
   mode: 'hash',
   linkActiveClass: 'u-link--Active', // This is the class when the link is activated
 })

5. "exact" attribute

Openrouter-linkStrict mode

<router-link :to="/" exact>home</router-link>

If the above tag is not addedexactAttributes will be in/articleThe page will also be matched.
This is not our original intention. After adding this attribute, it will match correctly.Down