Introduction of Router-link in Vue

Original address: http://router.vuejs.org/zh-cn/api/router-link.html

<router-link>

The <router-link> component enables users to navigate (click) in applications with routing capabilities. Specify the destination address through the to attribute, and the default render to the <a> tag with the correct link, and you can generate another label by configuring the Tag property ... In addition, when the destination route is successfully activated, the link element automatically sets a CSS class name that represents the activation.

<router-link> compared to the <a href= "..." > will be better, for the following reasons: whether it is HTML5 history mode or hash mode, it behaves in a consistent way, so when you want to switch routing mode, or demote in IE9 to make With hash mode, no change is required. In HTML5 history mode, the Router-link intercepts the click event so that the browser does not reload the page. When you use the base option in HTML5 history mode, all the to properties do not need to be written (the base path).

Props toType: string | Location required represents a link to a destination route. When clicked, the value of the to is immediately uploaded to Router.push (), so the value can be a string or an object that describes the target location.
<!--string--> <router-link to= "Home" >Home</router-link> <!--render results--> <a href= "Home" >home& lt;/a> <!--use v-bind JS expression--> <router-link v-bind:to= "' Home '" >Home</router-link> <!--do not write V-bi nd also can, just like binding other attributes--> <router-link:to= "' Home ' >Home</router-link> <!--ditto--> <router-link:to = "{path: Home '}" >Home</router-link> <!--named Route--> <router-link:to= "{name: ' user ', params: {userId : 123}} ">User</router-link> <!--with query parameters, the following result is/register?plan=private--> <router-link:to=" {path: ' Register ', query: {plan: ' Private '}} ' >Register</router-link>ReplaceType: Boolean default value: False to set the Replace property, when clicked, will invoke Router.replace () instead of Router.push (), so the navigation will not leave the history record.
<router-link:to= "{path: '/abc '}" replace></router-link>AppendType: Boolean default value: False

After the Append property is set, the base path is added before the current (relative) path. For example, we navigate from/A to a relative path B, if no append is configured, the path is/b, and if it is,/a/b

<router-link:to= ' {path: ' Relative/path '} ' append></router-link> tag type: String default: ' A ' Sometimes you want to <router-link> render to some kind of label, such as <li>. So we use the tag prop class to specify what kind of tag, and it will also listen for clicks, triggering the navigation.
<router-link to= "/foo" tag= "li" >foo</router-link> <!--rendering results--> <li>foo</li> active-class Type: string default: "Router-link-active" sets the name of the CSS class used when the link is activated. The default values can be configured globally by linkactiveclass the routing's Construction options. Exact type: Boolean default value: false "Activate" The default class name is based on inclusive match (all contains matches). For example, if the current path starts with/A, then the <router-link to= "/A" > will also be set to the CSS class name.

According to this rule, <router-link to= "/" > will light each route. If you want the link to use the exact match mode, use the exact property:

<!--this link will only be activated when the address is/-->

<router-link to= "/" exact>

See more examples of activating link class names to run.

Apply the CSS class name when activated to the outer element

Sometimes we have to apply the "CSS class name at activation" to the outer element, not the <a> tag itself, so you can use <router-link> to render the outer element, wrapping the inner native <a> tag:

<router-link tag= "li" to= "/foo" >

<a>/foo</a>

</router-link>

In this case,<a> will be the real link (it will get the correct href), and the "CSS class name when activated" is set to the outer <li>.