Vue Router Basics
Welcome to this comprehensive, student-friendly guide on Vue Router! If you’ve ever wondered how to navigate between pages in a Vue.js application, you’re in the right place. Vue Router is a powerful tool that helps you create a seamless, single-page application experience. Don’t worry if this seems complex at first—together, we’ll break it down into easy-to-understand pieces. Let’s dive in! 🚀
What You’ll Learn 📚
- Core concepts of Vue Router
- Setting up Vue Router in a Vue.js project
- Creating routes and navigating between them
- Handling dynamic routes and route parameters
Core Concepts
Before we jump into the code, let’s get familiar with some key terminology:
- Route: A path in your application that corresponds to a component.
- Router: The mechanism that handles navigation between routes.
- Router View: A component that displays the component for the current route.
Simple Example: Setting Up Vue Router
Let’s start with the simplest example of setting up Vue Router in a Vue.js project.
// Step 1: Install Vue Router using npm
npm install vue-router
// Step 2: Create a simple Vue application
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// Define some routes
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
// Create the router instance
const router = new VueRouter({
routes // short for `routes: routes`
});
new Vue({
render: h => h(App),
router
}).$mount('#app');In this example, we:
- Installed Vue Router using npm.
- Imported Vue Router and registered it with Vue using
Vue.use(VueRouter). - Defined two simple routes:
'/'for the Home component and'/about'for the About component. - Created a router instance and passed the routes to it.
- Mounted the Vue instance to the DOM with
routerincluded.
Expected Output: When you navigate to /, the Home component is displayed. When you navigate to /about, the About component is displayed.
Progressively Complex Examples
Example 1: Navigating Between Routes
// Add navigation links in your App.vue
Here, we use <router-link> to create navigation links. The <router-view> component is where the matched component will be rendered.
Example 2: Dynamic Routes
// Define a dynamic route
const routes = [
{ path: '/user/:id', component: User }
];
// Accessing the route parameter in the User component
User ID: {{ $route.params.id }}
Dynamic routes allow you to capture parameters from the URL. In this example, :id is a dynamic segment that can be accessed in the component using $route.params.id.
Example 3: Nested Routes
// Define nested routes
const routes = [
{ path: '/user/:id', component: User,
children: [
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}
];Nested routes allow you to display components within components. Here, UserProfile and UserPosts are nested under the User route.
Common Questions and Answers
- What is Vue Router?
Vue Router is the official router for Vue.js, enabling navigation between different components in a Vue application.
- How do I install Vue Router?
Use the command
npm install vue-routerto install Vue Router in your project. - What is a route?
A route is a path in your application that corresponds to a specific component.
- How do I create a dynamic route?
Use a colon
:before the parameter name in the path, like'/user/:id'. - Why use nested routes?
Nested routes allow you to create complex layouts with components nested within other components, making your application more organized.
Troubleshooting Common Issues
Ensure you have installed Vue Router correctly using npm. If you encounter an error saying Vue Router is not found, double-check your installation and import statements.
If your routes are not rendering as expected, check your
<router-view>placement in the template. It should be placed where you want the routed components to appear.
Practice Exercises
- Create a Vue application with at least three routes and navigate between them using
<router-link>. - Implement a dynamic route and display the parameter in the component.
- Set up nested routes and ensure the nested components render correctly.
For more information, check out the official Vue Router documentation.