Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue.js (vue-router)

高洛峰
Freigeben: 2016-12-03 09:23:00
Original
1584 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:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage