This article shares the routing jump for your reference. The specific content is as follows
1. Routing demo example
<div > <h1>Hello App!</h1> <p> <!-- use router-link Components to Navigate. --> <!-- By passing `to` Properties specify link. --> <!-- <router-link> By default it will be rendered into one `<a>` Label --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- Routing exit --> <!-- The component that the route matches will be rendered here --> <router-view></router-view> </div>
2. Routing jump
router-link is a component that is rendered by default into a tag with a link, and the link address is specified through the to attribute.
Note: The selected router-link will automatically add a class attribute value .router-link-active
1) The to attribute of router-link
This is a property that must be set, otherwise the route will not take effect. It represents a link to the route, can be a string or an object describing the target location.
<!-- String -->
<router-link to="home">Home</router-link>
<!-- Rendering result is the same as above use v-bind of JS expression -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- Rendering result is the same as above Don't write v-bind It's OK，就像绑定别of属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- Rendering result is the same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名of路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// The route is defined as follows, name can also be in Chineseconst routes = [
{ path: '/user', component: user, name: 'user' }
];
<!-- With query parameters，下面of结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
If it is a simple routing jump here, it can be written as to or: to or v-bind: to
2、replace
A boolean type, defaults to false. If replace is set to true, the navigation will not leave history records, and clicking the browser fallback button will not return to this route again.
<router-link to="goods" replace></router-link>
3、tag
router-link is rendered to a tag by default, and there are also methods to render it to other tags. The tag attribute is used to set the tag that router-link renders to.
<!-- Rendered intoliLabel --> <router-link to="goods" tag="li"></router-link>
4、active-class
The above said that the selected router-link will automatically add a class attribute value.router-link-active. This attribute is used to modify this class value.
<!-- Changerouter-linkofactive时ofclassname --> <router-link to="goods" active-class="router-active'></router-link>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.