Vue3 uses vue-router in a different way, adding methods such as createRouter and createWebHistory.

Define the Router

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [{path: '/'.component: Home
    }, {
      path: '/login'.component: Login
    }
  ]
})

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

Use the vue-router method

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  setup () {
    const route = useRoute()
    const router = useRouter()
    // jump within js
    // router.push()
    
    // Use the route parameter
    // route.query
    // route.params
    // route.params
    return {
      route
    }
  }
})
Copy the code