Qu'est-ce que le composant de lien de navigation de vue ?

Le composant de lien de navigation de

vue est « router-link ». Le composant "" permet aux utilisateurs de cliquer pour naviguer dans les applications dotées de fonctions de routage et de spécifier l'adresse cible via l'attribut to. La syntaxe est "... -link>"; Par défaut, il est rendu sous la forme de la balise "" avec la connexion correcte. Vous pouvez générer d'autres balises en configurant l'attribut de balise.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3. Le composant de lien de navigation de

vue est « router-link ».

introduction du composant Vue Router-Link

Le composant permet aux utilisateurs de cliquer pour naviguer dans les applications dotées de fonctions de routage. Spécifiez l'adresse cible via l'attribut to, est rendu par défaut sous la forme d'une balise avec la connexion correcte , et d'autres balises peuvent être générées en configurant l'attribut tag. De plus, lorsque la route cible est activée avec succès , l'élément de lien définit automatiquement un nom de classe CSS indiquant l'activation

Où est le lien du routeur ?

• Le lien du routeur dans la page principale affiché ici

• Il est donc dans App.vue (Pourquoi la page principale est-elle écrite dans App ? Ne devrait-elle pas être écrite dans index.html ? non non non , ici Il s'agit de restituer le contenu obtenu à partir de cette page vers la page principale) [Recommandations associées : tutoriel d'introduction à vuejs, front-end web]

• Dans App.vue, vous pouvez l'écrire où vous le souhaitez

router-link Comment utiliser

• Vous devez créer le composant correspondant

• Vous devez écrire l'adresse de routage correspondante de votre composant

• Écrire le correspondant sur la page App.vue (Lien)

Le processus détaillé d'écriture des itinéraires et d'importation des composants se trouve dans l'article ci-dessus. Voici une brève introduction

1 Vous devez créer les composants correspondants

2. . Vous devez ajouter votre Écrivez l'adresse de routage correspondante pour le composant

3. Écrivez le correspondant (lien) sur la page App.vue

Affichage du résultat :

Introduction au contenu. à l'intérieur

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

Voici le to L'attribut spécifie le chemin pour accéder à l'itinéraire (l'adresse dans la barre d'adresse

• Le to doit être cohérent avec le chemin que vous spécifiez, et n'est pas le cas-). sensible

• Supplémentaire : la balise a n'est pas autorisée, car elle est La réouverture d'un onglet peut également obtenir cet effet, mais elle ne semble pas aussi conviviale que le lien de routeur

Connaissances étendues : le lien de routeur Properties

composant Les attributs sont :

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

1, to (paramètre obligatoire) : tapez string/location

représente le lien de l'itinéraire cible, la valeur peut être une chaîne ou un objet lié dynamiquement décrivant l'emplacement cible

Les exemples suivants

//下面是字符串的形式
<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 : chaîne

Valeur par défaut : "a"

Si vous souhaitez que soit rendu dans une sorte d'étiquette, telle que

. Nous utilisons donc la classe tag prop pour spécifier quel type de balises, et elle écoutera toujours les clics et déclenchera la navigation.

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

Si nous voulons ajouter une balise à cette balise li à ce moment, comme indiqué ci-dessous, nous ne pouvons pas ajouter l'attribut href à la balise a

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

Dans ce cas, (il obtiendra le href correct) et le "nom de la classe CSS d'activation" est défini sur le

externe.

3. active-class

Type : string

Valeur par défaut : "router-link-active"

Définissez le nom de la classe CSS utilisée lorsque le lien est activé. La valeur par défaut peut être configurée globalement via l'option de construction de la route linkActiveClass.

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

La valeur par défaut est configurée globalement via l'option de construction de la route linkActiveClass, comme indiqué dans l'exemple suivant :

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

4, exact-active-class

Type : string

Valeur par défaut : "router-link- exact-actif"

配置当链接被精确匹配的时候应该激活的 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视频教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!