配置Vue Router处理以.project结尾的路由遇到问题

问题描述 #

需要让/user/work.project这类以.project结尾的二级路由由指定组件处理，但现有配置未生效：

• 访问/user/work.project时浏览器返回404错误
• 兜底的not_found路由未按预期处理未匹配路径

使用环境：Vue 3 + Vite

尝试的路由配置代码：

import { createRouter, createWebHistory } from 'vue-router';
import Landing from '@/components/Landing.vue';
import Project from '@/components/Project.vue';
import PageNotFound from '@/components/PageNotFound.vue';

const routes = [
    {
        path: '/',
        name: 'landing',
        component: Landing,
    },
    {
        path: '/:username/:project(.*\.project)$',
        name: 'project',
        component: Project,
        beforeEnter: (to, from, next) => {
            const isProjectRoute = /\.project$/.test(to.params.project);
            if (isProjectRoute) {
                next();
            } else {
                next({ name: 'not_found' });
            }
        }
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'not_found',
        component: PageNotFound
    }
];

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

export default router;

解决方案 #

1. 修复路由参数的正则表达式 #

问题出在路径参数的正则转义逻辑：JS字符串中\是转义字符，要在正则里匹配实际的.，需要写成双重转义的\\.。修改后的路由配置如下：

{
    path: '/:username/:project(.*\\.project)$',
    name: 'project',
    component: Project
}

修改后，正则会正确识别以.project结尾的project参数，/user/work.project能被正常路由到Project组件。

2. 移除冗余的beforeEnter校验 #

既然已经通过路径正则限制了匹配规则，beforeEnter里的重复校验属于冗余逻辑，可直接删除以简化代码。

3. 配置Vite的SPA fallback（避免刷新404） #

使用createWebHistory模式时，刷新非根路径会触发服务器404，需在Vite配置中添加fallback设置：
在vite.config.js中修改：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // 开发环境下，刷新非根路径时返回index.html
    fallback: 'index.html'
  },
  build: {
    // 如果部署在子路径，需设置对应base，例如部署在https://example.com/my-app/时：
    // base: '/my-app/'
  }
})

内容的提问来源于stack exchange，提问作者Mohammad Asgari