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-composants

export 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!