Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

npm installiere vue-router@4 

oder yarn add vue-router@4

"Abhängigkeiten": {
 "vue": "^3.2.16",
 "vue-router": "4"
},

importiere { createRouter, createWebHashHistory } von "vue-router";

const Routen = [
 {
  Weg:'',
  Komponente:()=>importieren("../views/login/index.vue")
 },
 {
  Pfad: „/home“,
  Komponente:()=>importieren("../views/home/index.vue")
 }
]

const router = createRouter({
 Verlauf: createWebHashHistory('/'),
 Routen
})

Standardrouter exportieren

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus "./router/index" importieren

const app = createApp(App)
app.use(Router)
app.mount('#app')

//Routen dynamisch hinzufügen - standardmäßig zum Stamm router.addRoute({
 Pfad: „/my“,
 Name: 'mein',
 Komponente:()=>importieren("../views/my/index.vue")
})

//Unterrouten dynamisch hinzufügen router.addRoute('my',{
 Pfad: „/info“,
 Komponente:()=>importieren("../views/my/info.vue")
})

<Vorlage>
  <button @click="backToHome">Zur Startseite</button>
</Vorlage>

<Skript>
importiere { useRouter } von "vue-router"
Standard exportieren {
 aufstellen(){
  const router = useRouter()
  zurückkehren {
   zurückZurStartseite(){
    router.push("/")
   },
  }
 }
}
</Skript>

<Vorlage>
  <div>Routenänderungen überwachen</div>
</Vorlage>

<Skript>
importiere { useRouter, useRoute } von "vue-router"
importiere { watch } von "@vue/runtime-core"
Standard exportieren {
 aufstellen(){
  const route = useRoute()
  //Route ist ein responsives Objekt, das Änderungen überwachen kann watch(()=>route.query,query=>{
   console.log('neueste',Abfrage)
  })
 }
}
</Skript>

router.beforeEach((bis,von,weiter)=>{
 console.log('globaler Frontschutz');
})
router.afterEach((bis,von)=>{
 console.log('globaler Post-Hook');
})

router.addRoute({
 Pfad: „/my“,
 Name: 'mein',
 Komponente:()=>importieren("../views/my/index.vue"),
 vorEingabe:(bis,von)=>{
  console.log('Routen-Exklusivschutz');
 }
})

<Skript>
importiere { onBeforeRouteLeave } von "vue-router"
Standard exportieren {
 aufstellen(){
 onnBeforeRouteLeave((nach,von)=>{
  const answer = window.confirm('Sind Sie sicher, dass Sie gehen möchten?')
  wenn(Antwort){
   console.log('nicht verlassen');
   return false
  }
  })
 }
}
</Skript>

//Vorherige Erstellungsmethode const router = new VueRouter({
 
})
neuer Vue({
 Router,
 render:h=>h(App)
}).$mount("#app")

//vue-router4-Erstellungsmethode importiere { createRouter } von "vue-router"
const router = createRouter({

})
erstelleApp(App).verwenden(Router).mount("#app")

//Vorher const router = new VueRouter({
 Modus: „Hash“
})

//Neuer Import { createRouter, createWebHashHistory } von „vue-router“
const router = createRouter({
 Verlauf: createWebHashHistory()
})

//Vorher const router = new VueRouter({
 Base:"/"
})

//Neuer Import { createRouter, createWebHashHistory } von „vue-router“
const router = createRouter({
 Verlauf: createWebHashHistory('/')
})

//Vor{
 Weg:'*',
 Komponente:()=>importieren("../components/NotFound.vue")
}

//vue-router 4
{
 Pfad:'/:PfadMatch(.*)*',
 Komponente:()=>importieren("../components/NotFound.vue")
}
// ist ein regulärer Ausdruck

//Vorher router.onReady(onSuccess, onError) //Rückrufe bei Erfolg und Fehler //vue-router 4
router.istBereit().dann(()=>{
 //Erfolg}).catch(err=>{
 //scheitern})

const router = createRouter({
 scrollVerhalten(bis, von, gespeichertePosition) {
  // Immer nach oben scrollen return { top: 0, left:0 }
 },
})
//Das vorherige { x:0, y:0 } wird durch { top: 0, left:0 } ersetzt.

//Vorher <keep-alive>
 <Router-Ansicht />
</am Leben erhalten>

//vue-router 4
<router-view v-slot="{component}">
 <am Leben erhalten>
  <Komponente: ist = "Komponente" />
 </am Leben erhalten>
</Router-Ansicht>

//Vorher <router-link to="child" anhängen > zu <router-link> springen

//vue-router 4
<router-link :to="append( $route.path , 'child' )" anhängen > springe zu <router-link>

//Vor dem <router-link to="/" tag="span">Sprung</router-link>

//vue-router 4
<router-link to="/" benutzerdefiniert>
 <span>Springen</span>  
</Router-Link>