...“ ;Die Standarddarstellung ist das Tag „“ mit der richtigen Verbindung, und andere Tags können durch Konfigurieren des Tag-Attributs generiert werden.">
Die Navigationslinkkomponente von vue ist „Router-Link“. Die Komponente „
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer. Die Navigationslinkkomponente von vue ist „Router-Link“. vue-Komponente Router-Link-Einführung
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 Sie müssen die entsprechende Komponente erstellenSie 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. Erweitertes Wissen: router-link's Eigenschaften: Typ: string Wenn Sie möchten, dass
In diesem Fall wirdals echter Link betrachtet (es erhält die richtige href) und der „Aktivierungs-CSS-Klassenname“ wird auf das äußere 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. Der Standardwert wird global über die Konstruktionsoption linkActiveClass der Route konfiguriert, wie im folgenden Beispiel gezeigt: 4, Exact-Active-Class Typ: Zeichenfolge Standardwert: „router-link- genau-aktiv" 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。 5、exact 类型: boolean 默认值: false "是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么
按照这个规则,每个路由都会激活
简单点说,第一个的话,如果地址是/aa,或/aa/bb,……都会匹配成功, 但加上exact,只有当地址是/时被匹配,其他都不会匹配成功 6、event 类型: string | Array
默认值: 'click' 声明可以用来触发导航的事件。可以是一个字符串。 如果我们不加event,那么默认情况下是当我们点击document的时候,跳转到相应的页面,但当我们加上event的时候,就可以改变触发导航的事件,比如鼠标移入事件 7、replace 类型: boolean 默认值: false 设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。 8、append 类型: boolean 默认值: false 设置 append 属性后,则在当前 (相对) 路径前添加基路径 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!Was ist die Navigationslinkkomponente von vue?
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
//下面是字符串的形式
Standardwert : "a"
3. active-classexport default new Router({ mode:'history', linkActiveClass:'is-active', routes: [ { path:'/about', component:about } ] })