Heim > Web-Frontend > js-Tutorial > Hauptteil

vue.js, vue-router erstellt einseitigen Anwendungsimplementierungscode

小云云
Freigeben: 2018-03-02 15:49:23
Original
1338 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich den Code zum Erstellen einer Einzelseitenanwendung mit vue.js und vue-router. Ich hoffe, er kann Ihnen helfen.

vue.js+vue-router erstellt eine Einzelseitenanwendung

1. Installation

npm install vue-router

2. Anwendung des Routers

1. Routenänderungen in Unterkomponenten überwachen

export default {
  name: 'app',
  computed:mapGetters(['loading','shownav']),
  //监听路由的变化
      watch:{
        $route(to,from){
            console.log(to);
            console.log(from);
        }
      },
  components:{
    
  }
}
Nach dem Login kopieren

Routing-Informationsobjekt: $route (schreibgeschützt und unveränderlich, seine Änderungen können durch Überwachung erkannt werden)

zeigt an aktuell Die Statusinformationen der aktivierten Route umfassen die Informationen, die durch das Parsen der aktuellen URL und des mit der URL übereinstimmenden Routing-Datensatzes erhalten werden. Routing-Informationsobjekte werden an mehreren Stellen angezeigt:

    Komponenten Im Inneren ist this.$route das Routeninformationsobjekt
  • im $route Observer (Watch)-Rückruf
  • route.match (Standort) Der Rückgabewert des Attributs
  • des Routeninformationsobjekts

    $route.path: Zeichenfolge. Der absolute Pfad der aktuellen Route
  • $route.params: Objekt.
  • $route.query: Objekt. URL-Abfrageparameter
  • $route.fullPath: vollständiger Pfad
  • $route.matched: Routing-Datensatz
  • $route.name: Der Name der aktuellen Route
  • 3. Vuex

2. Erstellen Sie einen Shop

Erstellen Sie ein weiteres Verzeichnis zum Speichern des Vuex-Status
//安装
npm install vuex --save

在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
Nach dem Login kopieren

Verwandte Empfehlungen:

Eine Beispielanalyse, wie Vue.js eine einzelne Seite mit mehreren Routing-Bereichen betreibt

H5-Prinzip zum Umschalten des Einzelseiten-Gesten-Schiebebildschirms

Webpack, Vue, Node realisieren die gemeinsame Nutzung von Einzelseitencode

Das obige ist der detaillierte Inhalt vonvue.js, vue-router erstellt einseitigen Anwendungsimplementierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!