communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

Vue.js（vue-router）

高洛峰
Libérer： 2016-12-03 09:23:00
original
1584 Les gens l'ont consulté

vue中vue-router的使用:

2016121153657757.jpg

2016121153657757.jpg

2016121170936477.gif

main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue

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 页面
Copier après la connexion

index.html中引入app.vue和build.js

<!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>
Copier après la connexion

app.vue引入router

<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>
Copier après la connexion

home.vue

<template>
<p class="home">
 <p class="htmleaf-content">
 我是home页面的内容
 </p>
</p>
</template>
Copier après la connexion

test.vue

<template>
<p class="test">
 <p class="test-content">
我是test页面的内容
</p>
</p>
 
</template>
Copier après la connexion

 最后用webpack 将程序打包.关于webpack大家可以看看

Étiquettes associées：
vue.js
source：php.cn
Article précédent：jQuery中ajax错误调试分析 Article suivant：JavaScript给每一个li节点绑定点击事件的实现方法
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Choisissez l'architecture d'application appropriée pour gérer les jetons de support Je souhaite utiliser une API qui utilise OAuth2.0. Bref, je dois obtenir un jeton d'accès ...
Depuis 2024-04-04 08:55:57
0
1
353
Créer un pull API pour Vue.js Je ne sais pas ce qui ne va pas chez moi ni pourquoi cela ne fonctionne pas, je veux juste...
Depuis 2024-04-03 16:12:29
0
1
363
Les valeurs des données Vue.js restent inchangées J'ai une donnée appelée : cat_pressed et cette fonction qui change la valeur des données :...
Depuis 2024-04-03 09:29:23
0
1
369
Meilleures pratiques pour l'utilisation des getters et/ou des propriétés calculées dans Vue.js J'adore vue.js et j'aime vraiment les propriétés calculées et VueXgetters. Mais j'ai attei...
Depuis 2024-04-01 18:22:49
0
1
431
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal