Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Vue.js (vue-router)

Vue.js (vue-router)

高洛峰
Freigeben： 2016-12-03 09:23:00
Original
1602 Leute haben es durchsucht

Verwendung des Vue-Routers in Vue:

Vue.js (vue-router)

Vue.js (vue-router)

Vue.js (vue-router)

So konfigurieren Sie main.js (es6-Schreibmethode): Denken Sie vor dem Zitieren daran, app.vue und build.js 

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')
 
//引入home页面
import homepage from './page/home.vue'
//引入test页面
import test from './page/test.vue'
 
Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);
 
var router = new Router({
 abstract: true,
 hashbang: false
});
//实现页面跳转
router.map({
 '/home':{
 component:homepage
 }, 
 '/test':{
 component:test
 }, 
  
})
 
router.start(App, '#app')
// router.go('test'); 默认直接跳转到 test 页面
Nach dem Login kopieren

app.vue in die erforderliche vue

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>vue.js学习笔记(2)</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
 <!--此处注意加载顺序,需要先加载dom在加载js,否则会&#39;Cannot find element: #app&#39;-->
 <p id=&#39;app&#39;></p>
 <script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>
Nach dem Login kopieren

index.html unter dem npm-Router einzuführen 

<template>
<p class=&#39;all-container&#39;>
 <p class="public-content">我是公共页面</p>
 <p class=&#39;menu&#39;>
 <ul class="list">
 <li><a v-link=&#39;"/home"&#39;>home页面</a></li>
 <li><a v-link=&#39;"/test"&#39;>test页面</a></li>
 </ul>
 </p>
 <router-view transition=&#39;animation&#39; class=&#39;container&#39; keep-alive></router-view>
</p>
</template>
Nach dem Login kopieren

home.vue

<template>
<p class="home">
 <p class="htmleaf-content">
 我是home页面的内容
 </p>
</p>
</template>
Nach dem Login kopieren

test.vue

<template>
<p class="test">
 <p class="test-content">
我是test页面的内容
</p>
</p>
 
</template>
Nach dem Login kopieren

Schließlich können Sie Webpack verwenden, um das Programm zu packen

Verwandte Etiketten：
vue.js
Quelle：php.cn
Vorheriger Artikel：Ajax-Fehler-Debugging-Analyse in jQuery Nächster Artikel：Implementierungsmethode zum Binden von Klickereignissen an jeden Li-Knoten in JavaScript
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
Wählen Sie die geeignete Anwendungsarchitektur für die Verarbeitung von Inhabertokens Ich möchte eine API verwenden, die OAuth2.0 verwendet. Kurz gesagt, ich benötige ein Zugri...
Aus 2024-04-04 08:55:57
0
1
353
Erstellen Sie einen API-Pull für Vue.js Ich weiß nicht, was mit mir los ist oder warum das nicht funktioniert. Ich möchte nur, das...
Aus 2024-04-03 16:12:29
0
1
363
Die Datenwerte von Vue.js bleiben unverändert Ich habe Daten namens cat_pressed und diese Funktion, die den Datenwert ändert: changeCat(...
Aus 2024-04-03 09:29:23
0
1
369
Best Practices für die Verwendung von Gettern und/oder berechneten Eigenschaften in Vue.js Ich liebe vue.js und ich liebe auf jeden Fall berechnete Eigenschaften und VueXgetter. Abe...
Aus 2024-04-01 18:22:49
0
1
431
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage