Linking up with the previous article, after the vite multi page configuration, I found that the router could not be used normally, so I had a headache. Then I looked around and finally found a solution. The article is a little wordy. If you need to see the difference in configuration, please go directly to the end
How to introduce router in vite2 will not be described in detail here. There are many articles

Old configuration

In App.vue:

  <router-link  to="/index">route-index</router-link><br/>
  <router-link  to="/test">route-test</router-link><br/>
   ===========
   <router-view>
   </router-view>
   ===========

router.js configuration:

import {createRouter, createWebHistory} from "vue-router";

// Routing information
const routes = [
    {
        path: "/",
        name: "index",
        component:  () => import('../views/index.vue'),
    },
    {
        path: "/index",
        name: "index",
        component:  () => import('../views/index.vue'),
    },
    {
        path: "/test",
        name: "test",
        component:  () => import('../views/test.vue'),
    },
];

// Export route
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

Problems:

1. Page 1 address is http://localhost:3000/index/index.html/ , after clicking route test, the corresponding component is displayed on the page, but the address is modified to http://localhost:3000/test
2. The address was modified to http://localhost:3000/test After, the page will not be found if you press enter to refresh the page

Solution history:

I searched a lot on the Internet and didn't find the corresponding solution. Although I guessed that it was the reason for router configuration, I didn't know how to solve it at that time, but I found by chance that createWebHistory can write parameters and modify the configuration

...
// Export route
const router = createRouter({
    history: createWebHistory('/index/index.html'), // The specific fields are configured according to the addresses of different pages
    routes
});
...

The first question after modification: the address of page 1 is http://localhost:3000/index/index.html/ , after clicking route test, the corresponding component is displayed on the page, and the address is modified to http://localhost:3000/index/index.html/test ，
This solves the problem that different pages can jump using different routes under multi page configuration, and the corresponding router logic can also be used

But the second problem is that you can't refresh the page after entering after the address jump. Look at the current address http://localhost:3000/index/index.html/test I wonder if it is an address splicing problem. router has two types: history and hash. If it can be solved by changing it, I checked some relevant articles and found that createWebHistory can be modified to createWebHashHistory, Hey, hey

The modified configuration is:

import {createRouter, createWebHashHistory} from "vue-router";
...
// Export route
const router = createRouter({
    history: createWebHashHistory('/index/index.html'), // The specific fields are configured according to the addresses of different pages
    routes
});
...

effect

No gif, no screen recording, only text description
Original address: http://localhost:3000/index/index.html#/
Click route index: http://localhost:3000/index/index.html#/index
Click route test: http://localhost:3000/index/index.html#/test
After switching routes, the current page can also be refreshed and displayed after entering in the url column
Perfect!

Final configuration

In fact, only history: createWebHashHistory("/index/index.html") has been modified

import {createRouter, createWebHashHistory} from "vue-router";

// Routing information
const routes = [
    {
        path: "/",
        name: "index",
        component:  () => import('../views/index.vue'),
    },
    {
        path: "/index",
        name: "index",
        component:  () => import('../views/index.vue'),
    },
    {
        path: "/test",
        name: "test",
        component:  () => import('../views/test.vue'),
    },
];

// Export route
const router = createRouter({
    history: createWebHashHistory("/index/index.html"),
    routes
});

export default router;