Was ist vue.js-Routing?

Routing bezieht sich auf den Prozess, bei dem ein Router ein Datenpaket von einer Schnittstelle empfängt, es entsprechend der Zieladresse des Datenpakets weiterleitet und an eine andere Schnittstelle weiterleitet.

Vue.js Routing ermöglicht uns den Zugriff auf unterschiedliche Inhalte über unterschiedliche URLs.

Vue.js kann zur Implementierung einer Single-Page-Webanwendung mit mehreren Ansichten (Single Page Web Application, SPA) verwendet werden.

Vue.js-Routing muss die Vue-Router-Bibliothek laden

Bei Verwendung von Routing ändert sich jedoch auch die URL, und Benutzer können sie beim Surfen im Internet direkt kopieren Seite Oder speichern Sie die URL der aktuellen Seite für andere. Diese Methode ist sowohl für Suchmaschinen als auch für Benutzer geeignet.

Einfaches Beispiel

Vue.js + vue-router können problemlos eine Single-Page-Anwendung implementieren.

ist eine Komponente, die zum Setzen eines Navigationslinks und zum Wechseln zwischen verschiedenen HTML-Inhalten verwendet wird. Das to-Attribut ist die Zieladresse, also der anzuzeigende Inhalt.

Im folgenden Beispiel fügen wir vue-router hinzu, konfigurieren dann die Komponenten und die Routenzuordnung und teilen dann vue-router mit, wo sie gerendert werden sollen. Der Code lautet wie folgt:

HTML-Code

<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>

JavaScript-Code

// 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')
 
// 现在，应用已经启动了！

Angeklickte Navigationslinks werden als class= formatiert „Router-Link-exakt-aktiv Router-Link-aktiv“.

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