Code examples for implementing single-page application (SPA) using Vue Router

What is a Single Page Application (SPA)?

Single-page application (SPA) is a web application implemented using JavaScript. When users interact with the application, the application only loads the web page once. This approach greatly improves the user experience because it obtains data through AJAX requests, avoiding full page refreshes, thus providing a smooth user experience.

Introduction to Vue Router

is a progressive JavaScript framework that is especially suitable for building user interfaces. At the heart of Vue is a responsive view layer that can handle the user interface more efficiently. Vue Router is the official routing management library that can easily implement page navigation and status management in single-page applications.

Development environment preparation

Before you start implementing, you need to make sure you have installed and npm. Then, you can use the Vue CLI to create a new Vue project with the following command:

npm install -g @vue/cli
vue create my-spa
cd my-spa

During the creation process, you can select the default configuration. Install Vue Router in the project directory:

vue add router

When asking if "History Mode" is used, selectYes。

Create Components

We need to create some basic Vue components to display in different routes. Opensrc/viewsCatalog and create three components:, and .

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <p>This is a use Vue Router Implemented single-page application example。</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <div>
    <h1>about Us</h1>
    <p>We are a team that loves development。</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<template>
  <div>
    <h1>Contact Us</h1>
    <p>You can contact us by email。</p>
  </div>
</template>

<script>
export default {
  name: 'Contact'
}
</script>

Configure routing

We have created three components and now we want to configure them in the route. Opensrc/router/, and modify it according to the following content:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/'
import About from '../views/'
import Contact from '../views/'

(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = new Router({
  mode: 'history', //Use history mode  routes
})

export default router

Create a navigation bar

In order for users to switch between different pages, we need to create a simple navigation bar. existsrc/Add the following code to:

<template>
  <div >
    <nav>
      <router-link to="/">front page</router-link> |
      <router-link to="/about">about</router-link> |
      <router-link to="/contact">Contact Us</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
nav {
  padding: 10px;
}
nav a {
  margin: 10px;
  text-decoration: none;
  color: blue;
}
nav -link-exact-active {
  font-weight: bold;
}
</style>

In this example, we used the<router-link>Components to create links. When users click on these links, Vue Router will switch components according to the configured path.

Run the application

Now that everything is ready, you can run the app for testing. Start the development server with the following command:

npm run serve

Visit in the browserhttp://localhost:8080, you should be able to see the simple single page app we created. Click the navigation link to switch between different views.

in conclusion

In this article, we learned how to use , and Vue Router to create a simple single-page application. Through routing configuration and smooth switching between different views, we achieve a user-friendly interactive experience.

Single-page applications have multiple advantages in design and development, which not only improves the user experience, but also improves overall performance by reducing server requests and page refreshes. I hope this article can help you understand and master the basic methods of building single-page applications using Vue Router, and encourage you to explore more powerful features of Vue! If you need more advanced routing configuration and functions, such as route guards, lazy loading and dynamic routing, you can refer toOfficial documentation for Vue Router。

The above is the detailed content of the code example of using Vue Router to implement single-page application (SPA). For more information about Vue Router single-page application (SPA), please follow my other related articles!