vite 多页面配置后如何使用 router

原创已于 2025-12-13 12:34:35 修改 · 5.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2021-10-13 18:31:26 首次发布

Vue3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vite2中遇到的多页面配置下Vue Router无法正常工作的问题，以及如何通过调整`createWebHistory`为`createWebHashHistory`来解决路径刷新失效的难题。通过修改路由配置，使得页面地址能够正确地以哈希形式展示并支持刷新。

衔接上一篇文章，vite多页面配置后发现router不能正常使用，就很头痛，然后东找找西凑凑总算找到了解决方案，文章有点啰嗦，需要看配置区别的请直接到最后
vite2中如何引入router这里不再详细描述，文章很多

老配置

App.vue中：

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

router.js配置：

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

// 路由信息
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'),
    },
];

// 导出路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

出现的问题：

页面1地址为http://localhost:3000/index/index.html/，点击路由-test后，页面上显示出了对应的组件，但是地址被修改为了http://localhost:3000/test
地址被修改为了http://localhost:3000/test后，对页面进行回车刷新会找不到页面

解决历程：

网上找了很多搜索了很多也没有找到对应的方案，虽然猜测是router配置原因但是当时并不知道如何解决，但是一次偶然机会发现createWebHistory是可以写入参数的，修改后的配置

...
// 导出路由
const router = createRouter({
    history: createWebHistory('/index/index.html'), // 具体字段根据不同页面所在地址进行配置
    routes
});
...

修改过后第一个问题：页面1地址为http://localhost:3000/index/index.html/，点击路由-test后，页面上显示出了对应的组件，而且地址也被修改为了http://localhost:3000/index/index.html/test，
这样就解决了在多页面配置下，不同的页面能够使用不同的路由进行跳转，相应的router逻辑也可以使用

但是第二问题，地址跳转后再回车无法对页面进行刷新还是存在的，看了下当前地址http://localhost:3000/index/index.html/test，猜想是否是地址拼接问题，router有history和hash两种，如果换一换能否解决，查了相关的一些文章资料发现createWebHistory可以修改为createWebHashHistory，嘿嘿！～

修改后配置为：

import {createRouter, createWebHashHistory} from "vue-router";
...
// 导出路由
const router = createRouter({
    history: createWebHashHistory('/index/index.html'), // 具体字段根据不同页面所在地址进行配置
    routes
});
...

效果

没有gif，没有录屏，就只有文字描述了
原地址：http://localhost:3000/index/index.html#/
点击路由-index：http://localhost:3000/index/index.html#/index
点击路由-test：http://localhost:3000/index/index.html#/test
切换路由后，在url栏回车后也能刷新展示出当前页面
完美！

最终配置

其实只对history: createWebHashHistory("/index/index.html"),进行了修改

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

// 路由信息
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'),
    },
];

// 导出路由
const router = createRouter({
    history: createWebHashHistory("/index/index.html"),
    routes
});

export default router;