Analyse approfondie du composant Vue router-link pour implémenter la navigation routière

Vue Router

Avec Vue.js, nous avons composé notre application avec des composants. Lors de l'ajout de Vue Router, tout ce que nous devons faire est de mapper nos composants aux routes afin que Vue Router sache où les restituer. [Recommandations associées : tutoriel vidéo vue.js]

Utilisation de Vue Router

Déclarative

Utilisez le composant router-link pour la navigation, en passant à pour spécifier le lien.
<router-link> affichera une balise <a> avec l'attribut href correct.
Exemple officiel : 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)

Au lieu d'utiliser la balise a habituelle, un composant personnalisé router-link est utilisé pour créer le lien. Cela permet à Vue Router de modifier l'URL 🎜 sans recharger la page, en gérant la génération et l'encodage de l'URL. 🎜🎜🎜router-view🎜
router-view affichera le composant correspondant à l'url. Vous pouvez le placer n'importe où en fonction de la disposition. 🎜🎜Navigation programmatique🎜🎜En plus d'utiliser <router-link> pour créer des balises pour définir les liens de navigation, nous pouvons également utiliser la méthode d'instance du routeur pour l'implémenter en écrivant du code. 🎜🎜Pour accéder à une autre URL, vous pouvez utiliser la méthode router.push. Cette méthode 🎜ajoutera un nouvel enregistrement🎜 à la pile d'historique, ainsi lorsque l'utilisateur clique sur le bouton Précédent du navigateur, il sera renvoyé à l'URL précédente. 🎜🎜Lorsque <router-link> est cliqué, cette méthode sera appelée en interne, donc en cliquant sur <router-link :to="..."> est tout à fait pour appeler router.push(...) : 🎜

Déclaratif	Programmatique
<router-link :to="...">	router.push(...)

🎜Le paramètre de cette méthode peut être un chemin de chaîne, ou un objet décrivant l'adresse. 🎜rrreee🎜🎜Remarque🎜 : Si le chemin est fourni, les paramètres seront ignorés🎜rrreee🎜Remplacer la position actuelle🎜🎜La fonction est similaire à router.push, la différence est qu'elle ne poussera pas l'historique lors de la navigation Ajouter un nouvel enregistrement🎜

Déclaratif	Programmatique
<router-link :to="..." replace>	router.replace(...)

🎜Vous pouvez également ajouter directement un attribut replace: truerouteLocation passé à router.push /code> : 🎜rrreee🎜Across history🎜🎜Cette méthode prend un entier comme paramètre, indiquant le nombre d'étapes en avant ou en arrière dans la pile d'historique, similaire à window.history.go(n). 🎜rrreee

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!