Eingehende Analyse der Vue-Router-Link-Komponente zur Implementierung der Routennavigation

Vue Router

Mit Vue.js haben wir unsere Anwendung aus Komponenten zusammengestellt. Wenn wir Vue Router hinzufügen, müssen wir lediglich unsere Komponenten Routen zuordnen, damit Vue Router weiß, wo er sie rendern muss. [Verwandte Empfehlungen: vue.js Video-Tutorial]

Vue Router verwenden

Deklarativ

Verwenden Sie die Komponente router-link für die Navigation und übergeben Sie to, um den Link anzugeben.
<router-link> rendert ein <a>-Tag mit dem richtigen href-Attribut.
Offizielles Beispiel: to 来指定链接。
<router-link> 将呈现一个带有正确 href 属性的 <a> 标签。
官方示例：

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

这里没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view
router-view 将显示与 url 对应的组件。可以把它放在任何地方，以适应布局。

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link :to="...">	router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替换当前位置

作用与router.push类似，不同的是，它在导航时不会向 history 添加新记录

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于window.history.go(n)

// 向前移动一条记录
router.go(1)
// 相当于
router.forward()

// 返回一条记录
router.go(-1)
// 相当于
router.back()

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

Anstelle des regulären a-Tags wird eine benutzerdefinierte Komponente router-link verwendet, um den Link zu erstellen. Dadurch kann Vue Router die URL 🎜 ändern, ohne die Seite neu laden zu müssen, und übernimmt die URL-Generierung und -Codierung. 🎜🎜🎜router-view🎜
router-view zeigt die der URL entsprechende Komponente an. Sie können es je nach Layout an einer beliebigen Stelle platzieren. 🎜🎜Programmatische Navigation🎜🎜Zusätzlich zur Verwendung von <router-link> zum Erstellen von Tags zum Definieren von Navigationslinks können wir auch die Instanzmethode des Routers verwenden, um sie durch Schreiben von Code zu implementieren. 🎜🎜Um zu einer anderen URL zu navigieren, können Sie die Methode router.push verwenden. Diese Methode fügt dem Verlaufsstapel einen neuen Datensatz hinzu. Wenn der Benutzer also auf die Zurück-Schaltfläche des Browsers klickt, wird er zur vorherigen URL zurückgeleitet. 🎜🎜Wenn auf <router-link> geklickt wird, wird diese Methode intern aufgerufen, also klicken Sie auf <router-link :to="..."> ist ganz zum Aufrufen von router.push(...): 🎜

Declarative	Programmatic
<router-link :to="...">	router.push(...)

🎜Der Parameter dieser Methode kann ein String-Pfad oder ein Objekt sein, das die Adresse beschreibt. 🎜rrreee🎜🎜Hinweis🎜: Wenn ein Pfad angegeben wird, werden Parameter ignoriert🎜rrreee🎜Ersetzen Sie die aktuelle Position🎜🎜Die Funktion ähnelt router.push, mit dem Unterschied, dass der Verlauf nicht gepusht wird beim Navigieren Neuen Datensatz hinzufügen🎜

Deklarativ	Programmatisch
<router-link :to="..." replace>	router.replace(...)

🎜Sie können auch direkt ein Attribut replace: truerouteLocation hinzufügen, die an router.push übergeben wird /code>: 🎜rrreee🎜Über den Verlauf hinweg🎜🎜Diese Methode verwendet eine Ganzzahl als Parameter, die angibt, wie viele Schritte im Verlaufsstapel vorwärts oder rückwärts gehen, ähnlich wie window.history.go(n). 🎜rrreee

Das obige ist der detaillierte Inhalt vonEingehende Analyse der Vue-Router-Link-Komponente zur Implementierung der Routennavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!