Vue Router is the official library for page navigation in Vue applications. Vue Router is simple to use, yet powerful. In this article, we will deep dive into Vue Router 4 (used with Vue 3). We will go over everything you need to know to use Vue Router comfortably.
npm install vue-router@4
src/router.js
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HomeComponent from './components/HomeComponent.vue'
const routes = [
{ name:'hello', path: '/hello', component: HelloWorld },
{ name:'home', path: '/home', component: HomeComponent },
] (Dont need to give route for App.vue because it is already set as homepage in main.js)
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
createApp(App).use(router).mount('#app') (open App.vue because set createApp(App))
src/App.vue
<template>
<router-linkto="/hello">Hello</router-link>
<router-linkto="/home">Home</router-link>
<router-linkto="/about">About</router-link>
<router-view />
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
