Detaillierte Erläuterung der Verwendung der Routing-Komponente vue-router von Vue.js-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung der Routing-Komponente vue-router von Vue.js

高洛峰

Freigeben： 2017-02-06 11:15:06

Original

1565 Leute haben es durchsucht

Es ist sehr einfach, eine Single-Page-Anwendung mit Vue.js + Vue-Router zu erstellen. Konfigurieren Sie einfach die Komponenten- und Routenzuordnung und teilen Sie dem Vue-Router dann mit, wo gerendert werden soll.

1. Grundlegende Beispiele für gängige Methoden:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>vue-router使用方法</title>
</head>
<body>
 <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>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router"></script>
 <script>
 
 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Foo = { template: &#39;<div>foo</div>&#39; }
 const Bar = { template: &#39;<div>bar</div>&#39; }
 
 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器，
 // 或者，只是一个组件配置对象。
 const routes = [
 { path: &#39;/foo&#39;, component: Foo },
 { path: &#39;/bar&#39;, component: Bar }
 ]
 
 // 3. 创建 router 实例，然后传 `routes` 配置
 const router = new VueRouter({
 routes // （缩写）相当于 routes: routes
 })
 
 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
 const app = new Vue({
 router
 }).$mount(&#39;#app&#39;)
 
 // 现在，应用已经启动了！
 </script>
</body>
</html>

Nach dem Login kopieren

2. Grundlegende Beispiele für die Blockmechanismusprogrammierung, am Beispiel der Verwendung in vue-cli

Vue-Router-Plug-In installieren

# npm install vue-router --save-dev

Im Komponentenordner unter src Ordner Erstellen Sie zwei neue Komponenten, Foo.vue und Bar.vue. Schreiben Sie den folgenden Inhalt in die Foo-Komponente

<template>
 <div>foo</div>
</template>

Nach dem Login kopieren

und schreiben Sie den folgenden Inhalt in die Bar.vue-Komponente

<template>
 <div>bar</div>
</template>

Nach dem Login kopieren

Öffnen Sie die Datei app.vue im Ordner src und ändern Sie den Code in

<template>
 <div id="app">
 <router-view
 class="view"
 keep-alive
 transition
 transition-mode="out-in">
 </router-view>
 </div>
</template>

Nach dem Login kopieren

Verwenden Sie hier die Router-Ansicht, um die beiden neu erstellten Seiten hier zu laden . , ändern Sie die Datei main.js im Ordner src

import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
//引用路由插件
import VueRouter from &#39;vue-router&#39;
 
//使用路由插件
Vue.use(VueRouter)
 
//引入组件
import Foo from &#39;./components/Foo&#39;
import Bar from &#39;./components/Bar&#39;
 
const routes = [
 { path: &#39;/foo/&#39; , component: Foo }，
 { path: &#39;/bar/&#39; , component: Bar }，
]
 
//使用路由规则
const router = new VueRouter({
 routes
})
//加载路由规则
new Vue({
 router,
 el: &#39;#app&#39;,
 render:h => h(App)
})

Nach dem Login kopieren

und führen Sie dann npm run dev aus, um den Effekt zu sehen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder PHP-Chinesisch verwenden kann.

Ausführlichere Erläuterungen zur Verwendung der Vue.js-Routingkomponente vue-router finden Sie auf der chinesischen PHP-Website für verwandte Artikel!