一个页面如何配置多个路由地址

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-app 中，页面路由由框架统一管理，必须在 pages.json 的 pages 数组中注册，一个页面文件只能对应一个 path，官方没有提供“一个页面配置多个路由地址（别名）”的开关。uni-app 的路由用法与 vue-router 不同，详见官方文档：路由、pages 配置。

不过可以通过以下几种方式达到“一个页面内容对应多个路由地址”的效果：

方案一：抽公共组件（推荐，全端通用）

把页面主体内容抽成一个公共组件，然后新建多个轻量页面分别注册不同的路由，页面内部都引用这个组件：

<!-- components/my-page/my-page.vue 放真正的页面内容 -->  

<!-- pages/demo/a.vue -->  
<template>  
    <my-page />  
</template>  
<script>  
    import myPage from '@/components/my-page/my-page.vue'  
    export default {  
        components: { myPage }  
    }  
</script>  

<!-- pages/demo/b.vue 同样引入 myPage -->

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

pages.json 中注册两个路由：

{  
    "pages": [  
        { "path": "pages/demo/a" },  
        { "path": "pages/demo/b" }  
    ]  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

这样 pages/demo/a 和 pages/demo/b 两个地址展示的是同一份内容，维护时只需改组件，App、小程序、H5 全端都适用。

方案二：仅 H5 端，服务器 rewrite + 启动时重定向

如果只是想让 H5 下多个短路径（如 https://xxxxx/aaa、https://xxxxx/ccc）都能访问到同一个页面 /pages/aaa/bbb：

1. 服务器配置 rewrite，把所有非静态资源请求重写到 index.html（否则直接访问短路径会 404）。nginx 常见写法：try_files $uri $uri/ /index.html;
2. 在 App.vue 的 onLaunch 中（用 H5 条件编译）读取当前路径，命中映射表后重定向：

onLaunch() {  
    // #ifdef H5  
    const map = {  
        '/aaa': '/pages/aaa/bbb',  
        '/ccc': '/pages/aaa/bbb'  
    }  
    const path = window.location.pathname  
    if (map[path]) {  
        uni.reLaunch({ url: map[path] })  
    }  
    // #endif  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

这种方式不用改动 pages 结构，只增加一段映射逻辑，但仅适用于 H5。

方案三：使用 vue-router 风格的路由插件

如果希望完全按 vue-router 的方式管理路由（包括别名、路由守卫等），官方文档建议可在插件市场搜索相关实现：插件市场 vue-router。

一般情况下推荐方案一，简单且无平台差异；只有 H5 短路径美化需求时才需要方案二。