Let’s createrouting project in Vue 3 using the Composition API (<script setup>) without TypeScript. We’ll use Vue Router for navigation and mimic the functionality of the React project with Home, About, Contact, and Profile pages, along with a 404 page.
Steps:
Step 1: Set up Vite with Vue
First, create a Vue project using Vite:
npm create vite@latest my-vue-router-app -- --template vue
cd my-vue-router-app
npm install
npm run dev
Step 2: Install Vue Router
Install Vue Router, the official router for Vue.js:
npm install vue-router
Step 3: Set Up the Vue Router in src/router/index.js
- Inside the
srcfolder, create a folder namedrouter. - In the
routerfolder, create anindex.jsfile, where we’ll configure the router:
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import Contact from '../pages/Contact.vue';
import Profile from '../pages/Profile.vue';
import NotFound from '../pages/NotFound.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/contact', name: 'Contact', component: Contact },
{ path: '/profile/:username', name: 'Profile', component: Profile },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Explanation:
- We define routes for
Home,About,Contact,Profile, and a wildcard route for 404 pages (NotFound). - The
:usernamein the profile route is a dynamic segment, meaning any value after/profile/will be passed as a parameter to theProfilepage.
Step 4: Set Up the Main App in App.vue
Now, configure the main App.vue to use the router:
<template>
<div>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
<li><router-link to="/contact">Contact</router-link></li>
</ul>
</nav>
<!-- Route View -->
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style>
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
</style>
Explanation:
<router-link>is the Vue Router equivalent of<a>tags but without full page reloads.<router-view>is where the matched route’s component will be rendered.
Step 5: Create the Page Components
Now, create the components for your pages.
Home Component (src/pages/Home.vue):
<template>
<div>
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
</div>
</template>
<script setup>
</script>
About Component (src/pages/About.vue):
<template>
<div>
<h1>About Us</h1>
<p>This is the about page.</p>
</div>
</template>
<script setup>
</script>
Contact Component (src/pages/Contact.vue):
<template>
<div>
<h1>Contact Us</h1>
<p>If you have any questions, feel free to reach out!</p>
</div>
</template>
<script setup>
</script>
Profile Component (src/pages/Profile.vue):
<template>
<div>
<h1>Profile Page</h1>
<p>Welcome, {{ username }}!</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
// Get the dynamic username parameter from the route
const route = useRoute();
const username = route.params.username;
</script>
Explanation:
- We use the
useRoute()function to access the route parameters. Theusernameis dynamically retrieved from the URL and displayed in the component.
NotFound Component (src/pages/NotFound.vue):
<template>
<div>
<h1>404 Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
</div>
</template>
<script setup>
</script>
Step 6: Modify main.js
In src/main.js, we need to import and use the router:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
Step 7: Run the App
Run the app with:
npm run dev
