Maison >interface Web >js tutoriel >vue.js, vue-router crée un code d'implémentation d'application d'une seule page
Cet article partage principalement avec vous le code pour créer une application monopage à l'aide de vue.js et vue-router. J'espère qu'il pourra vous aider.
vue.js+vue-router crée une application d'une seule page
1 Installation
npm install vue-router
Application du routeur
. 🎜 >
1. Surveiller les changements d'itinéraire dans les sous-composantsexport default { name: 'app', computed:mapGetters(['loading','shownav']), //监听路由的变化 watch:{ $route(to,from){ console.log(to); console.log(from); } }, components:{ } }Objet d'informations de routage : $route (en lecture seule et immuable, ses changements peuvent être détectés via la surveillance) indique le actuel Les informations d'état de l'itinéraire activé incluent les informations obtenues en analysant l'URL actuelle et l'enregistrement de routage correspondant à l'URL Les objets d'informations de routage apparaissent à plusieurs endroits :
<.> composants À l'intérieur, this.$route est l'objet d'information sur l'itinéraire
dans le rappel $route observer (watch)
route.match (emplacement) La valeur de retour de l'attribut
de l'objet d'informations d'itinéraire
$route.path : string. Le chemin absolu de l'itinéraire actuel
$route.params : Objet.
$route.query : objet. Paramètres de requête d'url
$route.fullPath : chemin complet
$route.matched : enregistrement de routage
$route.name : Le nom de l'itinéraire actuel
3. vuex
1. Installer vuex
//安装 npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
2. Créer un magasin
Créer un autre répertoire pour stocker l'état de Vuex
Recommandations associées :
Un exemple d'analyse de la façon dont Vue.js exploite une seule page avec plusieurs routages zones
Principe de commutation d'écran coulissant gestuel d'une seule page H5
Webpack, vue, nœud réalisent le partage de code d'une seule page
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!