Several ways to achieve multi-page jump effect by Vue3

In Vue 3, although Vue Router is the main way to handle single-page application (SPA) routing, if you need to implement multi-page redirection in a Vue 3 project (i.e. each page is loaded as a separate HTML file), you usually take a different approach, because Vue Router is mainly designed for single-page applications. However, there are several ways to simulate or implement the effect of multi-page jump in Vue 3 projects:

1. Use Vue Router but simulate multiple pages

While this is not a real multi-page application, you can simulate the effect of multi-page through Vue Router's nested routing and lazy loading. Each route can point to a different component that will be loaded when needed.

// router/
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/'),
  },
  // More routes...];

const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes,
});

export default router;

2. Use traditional HTML <a>  tags to jump page

In Vue components, you can use HTML directly<a>Tags to navigate to different URLs, which causes the browser to load a new page. This works when you really need to load different HTML files.

<template>
  <div>
    <a href="/">Go to Another Page</a>
  </div>
</template>

3. Use the Pages function of Vue CLI

If you are using Vue CLI, you can use its Pages feature to define multiple entry points, each of which generates a separate HTML file. existConfiguration in:

// 
 = {
  pages: {
    index: {
      entry: 'src/',
      template: 'public/',
      filename: '',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // When building the About page as a multi-page application    about: {
      entry: 'src/pages/about/',
      template: 'public/',
      filename: '',
      title: 'About Page',
      chunks: ['chunk-vendors', 'chunk-common', 'about']
    }
    // More pages can be added...  }
}

Note that this approach is actually to generate multiple HTML files at build time, each pointing to a different Vue instance.

4. Use server routing

If your application is deployed on the server and you want to return different HTML files according to the URL, then you can configure routing rules on the server and return the corresponding HTML files according to the requested URL. This usually involves configuring a web server (such as Nginx, Apache) or using backend technologies such as.

in conclusion

Which method to choose depends on your specific needs. If you are developing a typical single page app, using Vue Router is the best choice. But if you need to generate multiple independent HTML pages, you may want to consider using the Pages feature of Vue CLI or server routing.

The above is the detailed content of several ways Vue3 can achieve multi-page jump effect. For more information about Vue3 multi-page jump, please pay attention to my other related articles!