Was ist die Navigationslinkkomponente von vue?

Die Navigationslinkkomponente von

vue ist „Router-Link“. Die Komponente „“ unterstützt Benutzer beim Klicken, um in Anwendungen mit Routing-Funktionen zu navigieren und die Zieladresse über das Attribut „to“ anzugeben. Die Syntax lautet „... -link>"; Standardmäßig wird es als „“-Tag mit der richtigen Verbindung gerendert. Sie können andere Tags generieren, indem Sie das Tag-Attribut konfigurieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer. Die Navigationslinkkomponente von

vue ist „Router-Link“.

vue-Komponente Router-Link-Einführung

unterstützt Benutzer beim Klicken, um in Anwendungen mit Routing-Funktionen zu navigieren. Geben Sie die Zieladresse über das Attribut „to“ an. wird standardmäßig als -Tag mit der richtigen Verbindung gerendert , und andere Tags können durch Konfigurieren des Tag-Attributs generiert werden. Darüber hinaus legt das Link-Element bei erfolgreicher Aktivierung der Zielroute automatisch einen CSS-Klassennamen fest, der die Aktivierung anzeigt

Wo ist Router-Link?

• Der hier gezeigte Router-Link in der Hauptseite

• So steht er in App.vue (Warum ist die Hauptseite in App geschrieben? Sollte sie nicht in index.html geschrieben werden? Nein, nein, nein Hier wird der von dieser Seite erhaltene Inhalt auf der Hauptseite gerendert

• router-link So verwenden Sie

Sie müssen die entsprechende Komponente erstellen Sie müssen die entsprechende Routing-Adresse Ihrer Komponente eingeben Schreiben Sie das entsprechende auf der App.vue-Seite (Link)

• Der detaillierte Prozess zum Schreiben von Routen und zum Importieren von Komponenten finden Sie im obigen Artikel. Hier finden Sie eine kurze Einführung. 1. Sie müssen die entsprechenden Komponenten erstellen. 2 . Sie müssen die entsprechende Routing-Adresse für die Komponente hinzufügen.

• 3. Schreiben Sie den entsprechenden (Link) auf die App.vue-Seite darin

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

• Hier ist das to Das Attribut gibt den Pfad an, über den zur Route gesprungen werden soll (die Adresse in der Adressleiste

Das to darin muss mit dem von Ihnen angegebenen Pfad übereinstimmen und ist nicht die Groß-/Kleinschreibung). empfindlich

Zusätzlich: Das a-Tag ist nicht zulässig, da es sich um einen Tab handelt. Das erneute Öffnen eines Tabs kann diesen Effekt ebenfalls erzielen, fühlt sich aber nicht so freundlich an wie router-link

Erweitertes Wissen: router-link's Eigenschaften:

Typ string/location

stellt den Zielrouten-Link dar, der Wert kann eine Zeichenfolge oder ein dynamisch gebundenes Objekt sein, das den Zielort beschreibt

Die folgenden Beispiele

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

Typ: string

Standardwert : "a"

• Wenn Sie möchten, dass in eine Art Beschriftung gerendert wird, z. B.

• . Deshalb verwenden wir die Tag-Prop-Klasse, um anzugeben, welche Art von Tags es gibt, und sie wartet weiterhin auf Klicks und löst die Navigation aus.

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

Wenn wir zu diesem Zeitpunkt ein Tag zu diesem li-Tag hinzufügen möchten, wie unten gezeigt, können wir das href-Attribut nicht zum a-Tag hinzufügen.

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

  In diesem Fall wird als echter Link betrachtet (es erhält die richtige href) und der „Aktivierungs-CSS-Klassenname“ wird auf das äußere

• gesetzt.

3. active-class

Typ: stringStandardwert: „router-link-active“

Legen Sie den CSS-Klassennamen fest, der verwendet wird, wenn der Link aktiviert ist. Der Standardwert kann global über die Konstruktionsoption linkActiveClass der Route konfiguriert werden.

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

Der Standardwert wird global über die Konstruktionsoption linkActiveClass der Route konfiguriert, wie im folgenden Beispiel gezeigt:

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

4, Exact-Active-Class

Typ: Zeichenfolge

Standardwert: „router-link- genau-aktiv"

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

Das obige ist der detaillierte Inhalt vonWas ist die Navigationslinkkomponente von vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!