Vue Basis: Navigating Through Your App with Vue Router

Check this post in my web notes

Unlocking the full potential of your Vue.js projects involves seamlessly navigating between various pages and managing diverse sets of information. The daunting task of consolidating all data onto a single page is not only incredibly challenging but often downright impossible. This challenge is familiar to both designers and developers working on virtually every project.

Enter Vue Router – the indispensable tool that transforms this challenge into a manageable solution. Vue Router, an integral part of Vue.js, empowers developers and designers to navigate through different pages, presenting, updating, storing, and interacting with data in a structured and efficient manner. Whether you're showcasing content, implementing dynamic updates, or ensuring data persistence, Vue Router provides the essential functionality to enhance user experiences and streamline the development process.

I will create a new project for testing purposes by using the instructions from my previous post. If you do not have a project you can do the same. On the question "Add Vue Router for Single Page Application development?" we will answer "Yes", so that our project will already be with Vue Router. After we create a project and remove unneeded components, we can dive into coding.

After Vue Router was installed we needed to check or add if necessary few updates. First of all, we will create a router folder and index.js file inside with our router configures. Inside the file, we will import "createRouter" (directly create our router with some settings that we need to add: routes, history, hooks...) and "createWebHistory" (set settings for history mode) functions. To use "webHistory" mode in Vue Router, you need to configure your server to always return the same HTML page for different URLs. This is known as a "single-page application" (SPA) server configuration. When the server receives a request for a specific URL, it should always return the same HTML page, and then let Vue Router handle the routing on the client-side.

The major setting for the router is a routes array that accepts the object description of every route, inside that description we need to set the path, name, and component that will be rendered at that path. Here is the simple router configuration example:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHistory('/'),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})
export default router

Next, we will import our router file into main.js file and add it to our app before mounting, just like this:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

Now in our "App.vue" file we import and add into the template "RouterView", it is our container or other words place where we will render and update pages.

<template>
  <RouterView />
</template>

<script>
import { RouterView } from 'vue-router';
export default {
  name: 'App',
}
</script>

We will create two pages for now "Home" and "About" as in router/index.js file was mentioned to check if the router works correctly.

After all these manipulations we can use "npm run dev" command and check our pages. Our app will be launched locally on "localhost:port" address and we will see our "Home" page. If we add "/about" into url then the page will be changed and we will see our "About" page.

Awesome, we added and configured Vue Router in our app, now let's dive deeper into Vue Router's capabilities together! Experiment with advanced features like route guards, lazy loading, and navigation hooks to expand your expertise. In our upcoming posts, we'll delve into these functionalities, exploring them in detail. Additionally, leverage Vue Router's official documentation, community forums, and tutorials to broaden your understanding. This hands-on approach will prepare you for tackling complex scenarios in your Vue.js projects. Stay tuned for more insights and happy coding!

Continue studying...