Detailed explanation of router-link attribute in vue

The router-link attribute in vue has the following attribute values: to is equivalent to the herf tag for adding jump content, replace is used to not leave a history record when switching pages, and tag renders the router-link into the corresponding tag. Wait

In vue, vue.js and vue-router can be combined to implement a simple single-page application, in which is a component mainly used to set navigation links. To achieve different HTML content switching. Next, I will introduce this attribute in detail in the article, which has certain reference value and I hope it will be helpful to everyone.

【Recommended course: Vue Tutorial】

router-link tag

In the vue1.0 version, the a tag is still used to implement the link jump function, but the link address is different from that in html. It uses v-link properties to control. However, in version 2.0, the a tag was replaced by the rount-link attribute, but it will still be rendered as the a tag when displayed on the page. Next, the usage of each value in this attribute will be introduced in detail

Detailed explanation of router-link attribute value

(1) ":to" attribute value

This attribute value is equivalent to the "herf" attribute in the a tag, and the following content is the content of the jump link

<router-link :to="http://www.php.cn/">PHP中文网</router-link>

is equivalent to

<a href="http://www.php.cn/">PHP中文网</a>

(2)" replace" attribute value

The main purpose of adding the replace attribute value in the route-link tag is not to leave a history record when switching pages

<router-link :to="http://www.php.cn/" replace></router-link>

(3)" tag" attribute value

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

<router-link :to="/http://www.php.cn/" tag="li">PHP中文网</router-link>

Equivalent to

<li>PHP中文网</li>

li in the page at this time It will also play the role of a tag, because Vue will automatically bind a click event to it and jump to the page

(4) "active-class" attribute value

This attribute is used to set the class attribute when activating the link. That is, the current page and all links matching the current page address will be added with the class attribute.

<router-link :to="http://www.php.cn/" active-class="u-link--Active">PHP中文网</router-link>

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

(5) "append" attribute value

After setting the append attribute, then Appends the base path before the current (relative) path. For example, we navigate from /a to a relative path b. If append is not configured, the path is /b. If append is configured, it is /a/b

<router-link :to="{ path: &#39;relative/path&#39;}" append></router-link>

Benefits of using router-link instead of a tag

The router-link attribute can be rendered as any element in the page. For example, the li tag in the above code can still achieve the jump effect. In addition, when we click the a tag, the page may be reloaded, but after using router-link, this tag will be monitored by vue, and the page will not be refreshed when the link is jumped.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of Detailed explanation of router-link attribute in vue. For more information, please follow other related articles on the PHP Chinese website!