What is vue's navigation link component?

Vue’s navigation link component is “router-link”. The "" component supports users to click to navigate in applications with routing functions and specify the target address through the to attribute. The syntax is "...-link>"; the default rendering is the "" tag with the correct connection, and other tags can be generated by configuring the tag attribute.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Vue’s navigation link component is “router-link”.

vue component router-link introduction

component supports users to click in applications with routing functions navigation. Specify the target address through the to attribute. The default rendering is the tag with the correct connection. You can generate other tags by configuring the tag attribute. In addition, when the target route is successfully activated , the link element automatically sets a css class name indicating activation

Where is router-link?

• The router-link in the main page shown here

• So it is in App.vue (why is the main page written in In App, shouldn't it be written in index.html? No no no, here is to render the content obtained from this page to the main page) [Related recommendations: vuejs introductory tutorial, web front-end 】

• Write it wherever you like in App.vue

##How to use router-link

• You need to create the corresponding components

• You need to Write the corresponding routing address of your component

• Write the corresponding (link) on the App.vue page

Write the routing and import the component The detailed process is in the article above. Here is a brief introduction

1. You need to create the corresponding components

2. You need to Write the corresponding routing address for your component

3. Write the corresponding (link)

on the App.vue page

Result display:

Introduction to the content inside it

<router-link to="/">Home</router-link>

The to attribute here specifies the path to jump the route (the address in the address bar ).

• The to in this must be consistent with the path you specify, and is not case-sensitive

• Additional: a tag is not allowed, because It reopens a tab, and it can also achieve that effect, but it doesn’t feel as friendly as router-link

Extended knowledge: router- Attributes of link

The attributes of the component are:

to, replace, append, tag, active-class, exact, event, exact- active-class

1, to (required parameter): type string/location

represents the link of the target route. The value can be a string or It is a dynamically bound object that describes the target location

The following examples

//下面是字符串的形式
<router-link to="home">Home</router-link>

//下面几种为动态绑定，v-bind: 可以简写为:


<router-link :to="&#39;index&#39;">Home</router-link>

/*但注意这个组件的导出需要有类似下面的代码
export default {
  name: &#39;App&#39;,
  data(){
    return {
      index:&#39;/&#39;
    }
  }
}
*/

<router-link :to="{ path: &#39;/home&#39; }">Home</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: &#39;User&#39;}">User</router-link>
/*
  在路由的配置的时候，添加一个name属性，例如：
 routes: [
    {
      path:&#39;/home&#39;,
      name:&#39;User&#39;,
      component:home
    }
]
*/

2, tag

Type: string

Default value: "a"

If you want to be rendered into some kind of label, such as

. So we use the tag prop class to specify what kind of tags, and it will still listen for clicks and trigger navigation.

      <router-link :to="&#39;index&#39;"
                   tag="li"
                   event="mouseover">Home
      </router-link>

If we want to add an a tag to this li tag at this time, as shown below, we can not add the href attribute to the a tag.

        <router-link :to="{name:&#39;Home&#39;}" tag="li">
        <a>Home</a>
        </router-link>

In this case, will be used as the real link (it will get the correct href), and the "activation CSS class name" will be set to the outer

.

3, active-class

Type: string

Default value: "router-link-active"

Set the link The CSS class name to use when activating. The default value can be configured globally via the route's construction option linkActiveClass.

<router-link :to="{path:&#39;/about&#39;}"
                   active-class="activeClass"                  
      >about</router-link>

The default value is configured globally through the route's construction option linkActiveClass, as shown in the following example:

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path:'/about',
      component:about
    }
]
})

4, exact-active-class

type: string

Default value: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

        <li><router-link to="/">全局匹配</router-link></li>
        <li><router-link to="/" exact>严格匹配</router-link></li>

简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，

但加上exact，只有当地址是/时被匹配，其他都不会匹配成功

6、event

类型: string | Array

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

7、replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

【相关推荐：vuejs视频教程】

The above is the detailed content of What is vue's navigation link component?. For more information, please follow other related articles on the PHP Chinese website!