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

on the App.vue page

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

• 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

//下面是字符串的形式
<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
    }
]
*/

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

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

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

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

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

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