Qu'est-ce que le routage vue.js

Le routage fait référence au processus par lequel un routeur reçoit un paquet de données d'une interface, le dirige en fonction de l'adresse de destination du paquet de données et le transmet à une autre interface.

Le routage Vue.js nous permet d'accéder à différents contenus via différentes URL.

Vue.js peut être utilisé pour implémenter une application Web multi-vues à page unique (application Web à page unique, SPA).

Le routage Vue.js doit charger la bibliothèque vue-router

Mais lors de l'utilisation du routage, l'URL change également et les utilisateurs peuvent la copier directement lors de la navigation sur un site Web page Ou enregistrez l'URL de la page actuelle pour d'autres. Cette méthode est conviviale pour les moteurs de recherche et les utilisateurs.

Exemple simple

Vue.js + vue-router peut facilement implémenter une application d'une seule page.

<router-link> est un composant utilisé pour définir un lien de navigation et basculer entre différents contenus HTML. L'attribut to est l'adresse cible, qui est le contenu à afficher.

Dans l'exemple suivant, nous ajoutons vue-router, puis configurons les composants et le mappage de route, puis indiquons à vue-router où les restituer. Le code est le suivant :

Code HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view></div>

Code JavaScript

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
// 现在，应用已经启动了！

Les liens de navigation cliqués seront stylisés class= "routeur-lien-exact-actif routeur-lien-actif".

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!