Beispiel-Tutorial, das die Probleme mit Vue-Routing-Sprüngen zusammenfasst

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von VueRoutingSprungproblemaufzeichnung vor. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es als geben Referenz. Folgen wir dem Editor und werfen wir einen Blick darauf

Vor kurzem musste ich Vue verwenden, um eine App in meinem Projekt zu erstellen. Bei der Verwendung von Routing in Vue sind die folgenden Probleme aufgetreten.

Die Routing-Einstellungen lauten wie folgt:

{

path:'/tab',

component:Tab,

children:[{

path:'layoutList',

name:'LayoutList',

component:LayoutList

},{

path:'layoutView/:layoutId',

name:'LayoutView',

component:LayoutView

},{

path:'layoutDetail/:viewId',

name:'LayoutDetail',

component:LayoutDetail

}]

}

wobei /tab die Stammadresse mit 3 Unteradressen ist und die 3 Unteradressebenen sind: LayoutList => => LayoutDetail

Normale Situation: Angenommen, die aktuelle Route ist /tab/layoutList und Sie müssen zur LayoutView-Seite springen. Sie können router.push({path:'layoutView/'+item. id})

nach dem Sprung. Die Route ist /tab/layoutView/1

Wenn ich möchte Von der LayoutView-Seite zur entsprechenden LayoutDetail-Seite springen:

Situation 1: (Seite nicht gefunden)

Adresse vor dem Sprung: /tab/layoutView/1

Sprungcode: router.push({ path:'layoutDetail/'+item.id});

Adresse nach dem Sprung:/tab/layoutView/layoutDetail/27

Fall 2: (Seite nicht gefunden)

Adresse vor dem Sprung: /tab/layoutView/1

Sprungcode: router.push({path:'/layoutDetail/'+ item.id});

Adresse nach Sprung:/layoutDetail/27

Fall 3: (Seite nicht gefunden)

Adresse vor Sprung: /tab/layoutView /1

Sprungcode: router.push({path:'tab/layoutDetail/'+item.id});

Adresse nach Sprung:/tab/layoutView/ tab/ layoutDetail/27

Fall 4: (Die Seite wird normal angezeigt)

Adresse vor dem Sprung: /tab/layoutView/1

Sprung Code: router.push({path:'/tab/layoutDetail/'+item.id});

Adresse nach dem Sprung:/tab/layoutDetail/27

Folgen Sie nur der Operation in Fall 4, damit die Seite normal angezeigt werden kann.

Vue-Routing basiert auf der Push-Adresse, wenn die Adresse nicht mit / beginnt, wird sie direkt durch die Adresse nach dem letzten / der aktuellen Route ersetzt beginnt mit /, es wird die Adresse von Push als absolute Adresse verwendet.

Außerdem habe ich versucht, router.go({name:'LayoutDetail',params:{viewId:item.id}}) zu verwenden, die Seite springt nicht und die Adresse ändert sich nicht.

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial, das die Probleme mit Vue-Routing-Sprüngen zusammenfasst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!