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