vue.js, vue-router erstellt einseitigen Anwendungsimplementierungscode

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:{
    
  }
}

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)

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!