Detailed explanation of vue-router 4 usage examples

npm install vue-router@4 

or yarn add vue-router@4

"dependencies": {
 "vue": "^3.2.16",
 "vue-router": "4"
},

import { createRouter,createWebHashHistory } from "vue-router";

const routes = [
 {
  path:'',
  component:()=>import("../views/login/index.vue")
 },
 {
  path:'/home',
  component:()=>import("../views/home/index.vue")
 }
]

const router = createRouter({
 history:createWebHashHistory('/'),
 routes
})

export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"

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

//Dynamically add routes--by default, add to the root router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue")
})

//Dynamically add sub-routes router.addRoute('my',{
 path:'/info',
 component:()=>import("../views/my/info.vue")
})

<template>
  <button @click="backToHome">Go to home page</button>
</template>

<script>
import { useRouter } from "vue-router"
export default {
 setup(){
  const router = useRouter()
  return {
   backToHome(){
    router.push("/")
   },
  }
 }
}
</script>

<template>
  <div>Monitor route changes</div>
</template>

<script>
import { useRouter,useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"
export default {
 setup(){
  const route = useRoute()
  //route is a responsive object that can monitor changes watch(()=>route.query,query=>{
   console.log('latest',query)
  })
 }
}
</script>

router.beforeEach((to,from,next)=>{
 console.log('global front guard');
})
router.afterEach((to,from)=>{
 console.log('global post-hook');
})

router.addRoute({
 path:'/my',
 name:'my',
 component:()=>import("../views/my/index.vue"),
 beforeEnter:(to,from)=>{
  console.log('Route exclusive guard');
 }
})

<script>
import { onBeforeRouteLeave } from "vue-router"
export default {
 setup(){
 onnBeforeRouteLeave((to,from)=>{
  const answer = window.confirm('Are you sure you want to leave?')
  if(answer){
   console.log('do not leave');
   return false
  }
  })
 }
}
</script>

//Previous creation method const router = new VueRouter({
 
})
new Vue({
 router,
 render:h=>h(App)
}).$mount("#app")

//vue-router4 creation method import { createRouter } from "vue-router"
const router = createRouter({

})
createApp(App).use(router).mount("#app")

//Before const router = new VueRouter({
 mode:"hash"
})

//New import { createRouter, createWebHashHistory } from "vue-router"
const router = createRouter({
 history:createWebHashHistory()
})

//Before const router = new VueRouter({
 base:"/"
})

//New import { createRouter, createWebHashHistory } from "vue-router"
const router = createRouter({
 history:createWebHashHistory('/')
})

//Before{
 path:'*',
 component:()=>import("../components/NotFound.vue")
}

//vue-router 4
{
 path:'/:pathMatch(.*)*',
 component:()=>import("../components/NotFound.vue")
}
// is a regular expression

//Before router.onReady(onSuccess, onError) //Success and failure callbacks //vue-router 4
router.isReady().then(()=>{
 //Success}).catch(err=>{
 //fail})

const router = createRouter({
 scrollBehavior(to, from, savedPosition) {
  // Always scroll to the top return { top: 0, left:0 }
 },
})
//The previous { x:0, y:0 } is replaced with { top: 0, left:0 }

//Before <keep-alive>
 <router-view />
</keep-alive>

//vue-router 4
<router-view v-slot="{component}">
 <keep-alive>
  <component :is="component" />
 </keep-alive>
</router-view>

//Before <router-link to="child" append > jump to <router-link>

//vue-router 4
<router-link :to="append( $route.path , 'child' )" append > jump to <router-link>

//Before <router-link to="/" tag="span">Jump</router-link>

//vue-router 4
<router-link to="/" custom>
 <span>Jump</span>  
</router-link>