Vue Router多URL映射组件页面：从路由机制到工程化实践

Vue Router 多URL映射组件页面：从路由机制到工程化实践

做Vue开发的朋友大概率都碰到过这个场景：项目里有两个入口链接，域名后缀不一样，点进去要渲染的却是不同的业务页面。有人第一反应是“我复制一套组件，分别挂到两个路由上”，代码是跑通了，但维护的时候一套逻辑改两处，改漏一处就出线上事故。

先给结论：这个需求的标准解法就是Vue Router 的多路由配置 + 组件复用。核心思路是——两个 URL 对应两个路由记录，路由记录指向同一个组件或不同组件，再通过路由配置把 URL 和组件的映射关系确立下来。听起来简单，但里面涉及路由模式、路径匹配规则、参数传递、动态路由和导航守卫等一系列知识点，每一步都有坑。

这篇文章我按实际开发的推进顺序来写：先讲清楚 Vue Router 到底是怎么把 URL 映射到组件的，然后给出两种不同 URL 访问不同组件的核心写法，再深入到参数获取、嵌套路由和动态路由这些工程化场景，最后把我在项目里踩过的坑和排查套路整理成清单。不管是新手还是已经写过一段时间 Vue 的朋友，按这个路径走一遍，基本能把这个需求吃透。

1. 需求场景与核心思路拆解

1.1 这个需求背后到底在问什么

“两个不同的 URL 访问不同的组件页面”，拆开看是三件事：

• URL 不同：地址栏里的路径不一样，可以是https://xxx.com/home和https://xxx.com/about，也可以是https://xxx.com/detail/1001和https://xxx.com/detail/1002。后者还隐含了一层路径参数的概念。
• 访问不同组件页面：每个 URL 对应的页面可以是完全不同的业务模块，比如一个首页、一个详情页；也可以是同一个业务模块但展示不同数据，比如两个商品详情页。
• 如何建立这种映射：这就是 Vue Router 做的事。它维护一个路由表，路由表里每条记录把「路径」和「组件」绑定起来，浏览器地址变化时，Router 根据当前地址匹配路由表，决定渲染哪个组件。

所以这个问题的答案，本质上就是Vue Router 的路由表怎么写。

1.2 为什么选择 Vue Router 而不是手动判断 URL

有些朋友会说：我不装 Vue Router，直接在 App.vue 里window.location.href判断一下要显示哪个组件不就行了？

确实能实现，但不推荐。原因有三点：

• 状态丢失：手动判断 URL 后，组件的切换不会触发 Vue 的生命周期钩子，页面状态、异步数据请求都得自己手动管理。
• 嵌套导航困难：真实项目里页面是分层的（主布局套子页面），手动判断实现嵌套路由的代码复杂度会爆炸。
• 工程化配套缺失：Vue Router 提供了路由守卫、懒加载、动态路由、滚动行为恢复、导航进度条这些成熟方案，手动实现这些等于把框架该做的事重做一遍。

用 Vue Router，就是把 URL 管理这件事交给了专门做这件事的工具，开发人员只需要关心“什么路径对应什么组件”。

1.3 两种典型实现方案的选型逻辑

针对“两个不同 URL 访问不同组件页面”，我给新手朋友的建议是先把场景分清楚：

选型的核心是问自己一个问题：这两个 URL 渲染的是同一个逻辑模块吗？如果是，就不要复制组件文件，而是复用加参数区分；如果不是，就分开写组件，各自绑定路由。这套逻辑确定下来，后面的实现就很清晰了。

2. 基础实现：路由配置与组件映射全流程

这一节直接上实操。假设项目用的是 Vue 3 + Vue Router 4（Vue 2 项目里是 Vue Router 3，写法上略有差异，但核心概念一致），我先把完整的实现流程走一遍。

2.1 环境准备：安装与路由实例创建

首先确保项目里装了 Vue Router。用 npm 安装：

npm install vue-router@4

然后在src/router/index.js里创建路由实例：

import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/home', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router

这段代码就是核心答案：两个 URL/home和/about，分别映射到Home.vue和About.vue两个组件。安装完成后，在main.js里把 router 挂到 Vue 实例上：

import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')

挂载之后，项目里就可以用<router-link>和<router-view>了。

2.2 页面上如何跳转：router-link 和 router-view

组件页面怎么展示、怎么切换，靠的是两个内置组件：

在App.vue里写：

<template> <div> <nav> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> </nav> <router-view /> </div> </template>

<router-link>渲染出来是个<a>标签，点击它相当于告诉浏览器“我要访问这个 URL”；<router-view>是一个占位符，Router 匹配到的组件会被渲染到这里。这个过程不需要刷新页面，属于前端路由的核心特性。

2.3 两种 URL 指向同一个组件的写法

如果两个 URL 要访问同一个组件，又分两种小场景。

第一种：两个路径完全等价，显示内容也完全一样。这时候可以直接配置两条路由记录指向同一个组件：

const routes = [ { path: '/product', component: ProductDetail }, { path: '/goods', component: ProductDetail } ]

第二种：用别名机制。alias 的意思是“这个路径是那个路径的别名”，比如：

const routes = [ { path: '/product', component: ProductDetail, alias: '/goods' } ]

用了 alias，访问/goods时 URL 保持为/goods，但匹配的是/product这条路由，组件是同一个。两种用法的区别在于路由名称和匹配到的记录是否一致，后面在“常见问题”里我会展开。

第三种：有参数区分。URL 是/detail/1001和/detail/1002，组件同一个，但要根据 ID 显示不同数据。用动态路径参数实现：

const routes = [ { path: '/detail/:id', name: 'Detail', component: DetailPage } ]

这样/detail/1001、/detail/1002都匹配DetailPage组件，组件内通过route.params.id拿到当前 ID。数据请求放在watch路由参数变化的逻辑里，确保从 1001 切到 1002 时重新拉数据。这块在下一节完整展开。

2.4 模式选择：hash 还是 history

配置createWebHistory()用的是 HTML5 History 模式，URL 是标准路径形式：https://xxx.com/home。另一种是 Hash 模式：

import { createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), routes })

Hash 模式下 URL 形如https://xxx.com/#/home，#后面的变化不会真正向服务器发请求，所以部署到任意静态服务器都能直接跑。

我项目里的实践经验：开发环境用 history，生产环境优先 history，但服务器必须做 URL 重写配置。nginx 配置如下：

location / { try_files $uri $uri/ /index.html; }

这个配置的意思是：请求的路径找不到对应文件时，都回退到index.html，然后由前端路由接管。如果服务器没做这个配置，在 /home 页面刷新就会报 404——这是 history 模式最常见的问题。第 5 节我会把这事的排查路径单独讲。

3. 核心细节解析：路由参数、嵌套路由与命名视图

实现“两个 URL 访问不同的组件”只是第一步，真实项目里围绕这个需求，几乎一定会派生出一串连锁问题：URL 里带参数怎么办？多个页面有公共布局怎么组织？一个页面上有多块区域需要独立渲染组件怎么办？本节逐个拆解。

3.1 路由参数：动态路径匹配与参数获取

“两个不同的 URL”很多时候不是/home和/about这种完全不同的路径，而是/user/zhangsan和/user/lisi。这种场景用动态路径参数。

路由配置：

const routes = [ { path: '/user/:name', name: 'UserProfile', component: UserProfile } ]

:name就是一个动态段，它会匹配任意一个非空字符串。访问/user/zhangsan和/user/lisi，都会渲染UserProfile.vue。

组件里拿到参数有两种方式。

在 Vue 3 组合式 API 中：

<script setup> import { useRoute, useRouter } from 'vue-router' import { watch } from 'vue' const route = useRoute() const router = useRouter() // 方式一：直接读当前参数 console.log(route.params.name) // 方式二：监听参数变化，可用于重新请求数据 watch(() => route.params.name, (newName) => { // 在这里根据 newName 重新请求数据 fetchUserInfo(newName) }) </script>

注意这里的watch。很多新手会忽略——同一路由下动态参数变化（zhangsan 切到 lisi），组件实例是复用的，created钩子不会重新执行。不监听参数变化，页面内容永远停留第一次进入时拉取的数据。这是这个场景下最容易翻车的一个点。

在 Vue 2 选项式 API 中，对应写法是：

export default { created() { console.log(this.$route.params.name) }, watch: { '$route.params.name'(newName) { // 重新请求数据 } } }

3.2 多个 URL 共享同一个布局：嵌套路由怎么组织

常见后台管理系统场景：/user/list和/user/detail/1001都属于“用户管理”模块，页面上半部分都是同一个侧边栏布局，只有内容区不同。如果每个页面组件里都复制一份侧边栏，项目结构会乱得没法维护。

用嵌套路由解决。

目录和组件结构：

src/views/ UserManage.vue # 外层布局组件：侧边栏 + 顶部 + <router-view> user/ UserList.vue # 用户列表 UserDetail.vue # 用户详情

UserManage.vue里：

<template> <div class="user-layout"> <Sidebar /> <main> <router-view /> </main> </div> </template>

路由配置：

const routes = [ { path: '/user', component: UserManage, children: [ { path: 'list', component: UserList }, { path: 'detail/:id', component: UserDetail } ] } ]

这样/user/list和/user/detail/1001渲染的都是UserManage这个大框架，框架内部的内容区分别渲染UserList和UserDetail。父级路由配置了 component，子路由再配置自己的 component，URL 访问的是父路径加子路径的组合。

关于嵌套路由有两点提示：

• 子路由的path不要以/开头写绝对路径，写成相对路径list，它会自动拼接父路径变成/user/list；如果写成/list，会被认为是根路径下的/list，匹配不上。
• 子路由比较多时，父组件里别忘了放<router-view>，否则匹配到的子组件没有出口渲染，页面空白。

3.3 命名视图：一个 URL 渲染多个组件区域

另一个常见场景：某个 URL 页面上有多个独立区块，每个区块来自不同组件，比如首页有头部推荐位、中间列表位、右侧公告位。三个区块组件之间没有嵌套关系，它们都是同一个路由的兄弟组件。

这种场景用命名视图。

路由配置：

import Recommend from '../views/Recommend.vue' import ArticleList from '../views/ArticleList.vue' import Announcement from '../views/Announcement.vue' const routes = [ { path: '/home', components: { default: Recommend, list: ArticleList, aside: Announcement } } ]

页面模板：

<template> <div> <router-view /> <router-view name="list" /> <router-view name="aside" /> </div> </template>

注意配置项由component变成了components（多了个 s）。不带name的<router-view>渲染的是default对应的组件；带name="list"的渲染的是list对应的组件。这样访问一个 URL，页面三个区域同时渲染三个不同组件，互不干扰。

这个能力在做 portal 类页面、工作台类页面时很实用。比如/dashboard一个 URL，左边是图表组件、右边是待办列表、底部是动态消息，用命名视图一次声明，比在组件内部用v-if堆逻辑要清晰得多。

3.4 URL 参数补充：query 和 hash 的应用

除了路径参数，URL 上还有查询参数（query）和 hash 片段。

query 形式：/search?keyword=vue&page=2。这类参数适合表达“条件”“分页”这类非必要信息。组件里获取方式：

route.query.keyword

跳转时携带 query 的写法：

<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 2 } }">

hash 片段形式：/detail/1001#comments，这个通常用来定位页面内部位置，和路由跳转的关系不大，但如果你用window.location.hash做其他逻辑，要注意它和 Vue Router 的 hash 模式（#/home）完全不是一回事。在第 5 节我会讲这个容易混淆的点。

4. 工程化进阶：动态路由、导航守卫与 meta 配置

前面讲的都是静态路由，也就是项目启动时路由表就固定了。但真实的中后台项目里，另外一个高频需求是：一个 URL 不确定要渲染哪个组件，要根据当前用户角色、权限或者某个配置来决定。这就需要动态路由登场。

4.1 动态路由：登录后按权限挂载路由表

场景描述：“两个不同 URL 访问不同组件”升级版——两个用户点同一个 URL，看到的页面不同。管理员点/reports看到的是报表组件，普通员工点/reports被重定向到无权限页。不能直接把/reports写成静态路由，因为权限决定它是否可见可访问。

动态路由就是登录成功后，根据用户角色向 router 实例添加路由记录。

路由分两份：

// 基础路由：所有人可访问 const constantRoutes = [ { path: '/login', component: Login }, { path: '/', redirect: '/dashboard' } ] // 动态路由：按权限分配 const asyncRoutes = [ { path: '/reports', name: 'Reports', component: () => import('../views/Reports.vue'), meta: { roles: ['admin'] } } ]

登录成功后：

// 假设当前用户是 admin router.addRoute(asyncRoutes[0])

addRoute是 Vue Router 提供的方法，可以在运行时动态添加一条路由记录。添加之后，无需刷新页面，/reports立即可以被访问。

服务端返回权限码的场景，动态路由更进一步：后端返回当前用户有权限的路由表数据，前端根据这份数据递归生成routes数组，然后逐个addRoute。这个方案能实现一套前端代码适配多个角色组合的复杂权限模型。

4.2 导航守卫：URL 变化前做拦截与校验

动态路由配好后，还有一个问题：用户直接在地址栏输入/reports，路由还没添加前会匹配不到，直接落到 404 页面。所以要在导航发生前做处理，这就是导航守卫的职责。

以全局前置守卫为例：

router.beforeEach(async (to, from) => { const token = localStorage.getItem('token') // 未登录只能去登录页 if (!token && to.path !== '/login') { return { path: '/login', query: { redirect: to.fullPath } } } // 已登录但动态路由尚未挂载，先挂载再继续导航 if (token && !router.hasRoute('Reports')) { const userInfo = await getUserInfo() const accessibleRoutes = filterRoutes(asyncRoutes, userInfo.roles) accessibleRoutes.forEach(route => router.addRoute(route)) // 返回 to.fullPath 重新触发一次导航 return { path: to.fullPath, replace: true } } })

注意最后一步return { path: to.fullPath, replace: true }：因为addRoute后的路由表变化不会自动重新匹配当前导航，必须手动触发一次“重新导航”，路由才能正确匹配到刚添加的记录。这个 re-nav 的细节是我见过很多团队出错的地方。

另外meta字段是路由记录上挂载自定义信息的地方，比如页面标题、是否需要缓存、是否需要权限等。热词里提到的vue router meta nocache就是通过 meta 控制某个页面不缓存。典型写法：

const routes = [ { path: '/user/account', component: Account, meta: { nocache: true } } ]

然后在守卫里读取：

router.afterEach((to) => { if (to.meta.nocache) { // 比如给 document title 加标记，或通知组件清理缓存 } })

控制缓存的做法很多团队会在keep-alive的include里结合meta动态判断。明确一点：meta 本身只是“携带信息”，具体的行为逻辑还得你在守卫或组件里自行实现。

4.3 路由 lazy loading：多页面项目的性能优化

两个 URL 对应两个组件，如果两个页面代码量都很大，直接import会让首屏包体积剧增。工程化的做法是路由级代码分割，按需加载。

用动态 import：

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

这样打包时，Home.vue和About.vue会各自生成单独 chunk，只有在对应 URL 被访问时才加载对应文件。实测下来对项目首屏加载速度的提升非常明显。

值得注意的是，() => import()这种写法在路由添加过多时，会出现“首次点击某个页面时白屏几百毫秒”的现象，这是代码分割的代价。生产环境可以配合 prefetch 预加载解决：Vue CLI 默认prefetch开启，会把当前页面能访问到的所有异步 chunk 提前下载；如果你觉得首屏网络请求太多，也可以手动关闭按需配置。项目体验的取舍非常直观：文件多 chunk 多可以提升访问速度，代价是请求数增加。

5. 项目实操中的避坑指南与经验总结

前面把多 URL 映射组件的方案讲完了，这一节集中聊我实际开发里遇到过且高频的问题。这些问题网上搜不太到完整解，基本都是踩坑后总结出来的，写在这里供参考。

5.1 刷新后 404：history 模式后端的必备配置

现象：本地开发一切正常，部署到服务器后，访问/home页面正常，但按 F5 刷新直接 404。

原因：history 模式下，浏览器向服务器请求的是真实路径/home，服务器在文件系统里找不到这个文件，就返回了 404。

解决：在 nginx 里配置 URL 重写，把没匹配到实际文件的请求都指向index.html。配置方法在 2.4 节给过。这里补充一个注意点：如果你的项目部署在子目录（比如访问域名是https://xxx.com/app/），路由的 base 也要对应配置：

const router = createRouter({ history: createWebHistory('/app/'), routes })

nginx 的 try_files 也要相应调整：

location /app/ { alias /usr/share/nginx/html/; try_files $uri $uri/ /app/index.html; }

base 没配对，子目录部署时路由路径全部对不上，表现是资源加载 404 或者点击跳转后路径错乱，排查思路往 base 上靠非常关键。

5.2 hash 模式与 URL 上带的 hash 参数不是同一个东西

有些项目用 hash 模式（createWebHashHistory），地址栏长这样：https://xxx.com/#/home。这是 Vue Router 的 hash 模式，#后面是路由路径。

但项目里还有一个常见用法：页面上有 tab 切换，想用 URL hash 记住当前 tab，比如https://xxx.com/#/detail?tab=comments。这里的#后面整体都是 Vue Router 管理的部分，你不能直接在#后面再加一个#来表示页面内部锚点。

做法是把 tab 状态放到 query 里，而不是 hash 里：

<router-link :to="{ path: '/detail', query: { tab: 'comments' } }">

或者在组件里同步：

const route = useRoute() const router = useRouter() function switchTab(tab) { router.replace({ query: { ...route.query, tab } }) }

5.3 路由匹配的优先级：谁先谁后的坑

动态路由和静态路由同时存在时，匹配顺序要注意。Vue Router 的匹配规则是：按路由表的注册顺序，越靠前越优先，第一份匹配到的记录胜出。

这个规则直接引出一个经典 bug：如果项目里同时存在/detail/:id和/detail/create，而:id写在前面，访问/detail/create时，动态段会把create当作参数值，匹配到的是Detail组件而不是新建页面。

// 错误示例：:id 在前，create 被当成 id const routes = [ { path: '/detail/:id', component: DetailPage }, { path: '/detail/create', component: CreatePage } ] // 正确示例：按精确程度倒序，静态路径在前 const routes = [ { path: '/detail/create', component: CreatePage }, { path: '/detail/:id', component: DetailPage } ]

经验法则：路由定义的顺序，越具体的越靠前，带动态参数的靠后。这条规则同样适用于嵌套路由的父子顺序。

5.4 组件复用时生命周期不触发

前文提过一次这个坑，但值得单独列一条，因为太典型了。两个 URL 映射同一个组件时（比如/detail/1001和/detail/1002），从 1001 切换到 1002，组件实例不销毁重建，created、mounted这些钩子不会再次执行。

新手常见现象：点击其他商品的链接，URL 变了，页面数据没变。

解决套路：不要依赖生命周期钩子拉数据，改成在watch里监听路由参数变化：

watch(() => route.params.id, (newId, oldId) => { if (newId !== oldId) { fetchData(newId) } })

老项目 Vue 2 里同样问题用watch: { '$route.params.id': handler }解法。

5.5 多路由指向同组件时的 name 冲突

早期我用两条路由记录指向同一个组件时踩过一个隐蔽的坑：两个路由都给了不同的name，然后某个组件里用router.push({ name: 'ProductDetail' })跳转，结果实际跳到的 URL 不是预想的那一个。

原因是：name是全局唯一的路由标识，后注册的同名路由会覆盖先注册的同名路由。当你用两条独立路由记录指向同一个组件并都想给它们起名时，系统内就会发生这种覆盖问题。

解决：要么只给一条必要的name，要么用alias避免重复记录，要么跳转时直接走path而非name。经验教训是：用 name 跳转之前，先查一下这个 name 在项目里是不是唯一的。

5.6 让人头疼的 URL 编码与特殊字符

热词里有一个很有意思的：url编码。路由里的中文参数、斜杠参数、空格等特殊字符，直接塞进 URL 会出问题。

比如router.push({ path: '/search', query: { keyword: 'Vue 路由' } })，最终 URL 里 keyword 会被自动编码成Vue%20%E8%B7%AF%E7%94%B1。这是 Vue Router 自动完成的 URL 编码，一般是安全的。

但有一种情况会出差错：手动拼接 URL 字符串再router.push：

// 危险写法：中文直接拼进 URL router.push('/search?keyword=' + keyword) // 安全写法：通过对象传递，交给 Router 编码 router.push({ path: '/search', query: { keyword } })

如果你的团队习惯手拼 URL，建议做一次全局约定：跳转一律用对象形式。遇到“URL 解码失败”“参数值被截断”这类问题，优先怀疑手拼字符串时特殊字符未编码。

5.7 排查套路：两步定位路由匹配问题

遇到“URL 访问组件不对”这类问题，我的排查习惯如下：

• 第一步，打印当前匹配到的路由记录。在组件里临时加一行：

console.log(router.currentRoute.value)

看matched数组里有哪些路由记录，特别是path、name、meta字段是否和预期一致。如果匹配到的不是目标路由，基本可以断定路由表顺序或路径写法有问题。

• 第二步，查路由注册表。Vue Router 4 里可以用：

// 查看全部已有路由（调试用） router.getRoutes().forEach(route => console.log(route.path, route.name))

确认目标路径是否被意外记录覆盖，或者addRoute添加的路径和预期不符。这套两口排查法，能解决 80% 的路由匹配问题。

6. 从简单映射到架构设计：多 URL 组件映射的扩展思路

解决了“两个 URL 访问不同组件页面”的基础问题后，这一步再往外延伸一下——在多入口、多业务线项目里，这类 URL 映射需求往往不是两三条路由，而是几十上百条。规模上来后，路由的组织方式就需要从“写配置”升级为“设计架构”。

6.1 大型项目里路由文件的组织方式

项目路由超过三十条，把全部routes写在一个文件里，随便改一行都要翻半天。我的实践是按业务模块拆分文件：

src/router/ index.js # 实例创建 + 全局守卫 routes/ constant.js # 静态路由：登录页、404、首页 user.js # 用户模块路由 order.js # 订单模块路由 product.js # 商品模块路由

每个模块文件导出数组，在index.js里合并：

import userRoutes from './routes/user' import orderRoutes from './routes/order' import productRoutes from './routes/product' const routes = [ ...userRoutes, ...orderRoutes, ...productRoutes ]

模块化之后有两个明显的好处：找路由不用全文搜索了；不同团队维护不同模块时，Git 冲突概率大幅下降。

6.2 路由与菜单联动：从 URL 反向生成导航

路由表里存的meta信息如果能规范起来，菜单可以自动生成。每个路由记录里放上菜单标题、图标、排序字段，前端遍历路由表直接渲染侧边栏：

const routes = [ { path: '/user', component: UserManage, meta: { title: '用户管理', icon: 'user', sort: 1 } } ]

这样新增一个页面时，只要写路由并配上 meta，菜单自动出现，不需要再单独维护一份菜单配置文件。URL、路由、菜单三者保持同源，少了一处“改漏”的风险源。

6.3 前后端分离项目里的 URL 访问路径协同

热词里有springboot vue前后端分离，顺带说一下前后端分离场景下的 URL 访问路径协同问题。

前端的 URL 和后端的 URL 在同一个域名下时，需要约定清楚哪些路径属于前端路由，哪些属于后端 API。比如：

https://xxx.com/ # 前端路由 https://xxx.com/api/login # 后端接口

此时 nginx 需要把/api开头的请求反向代理到后端服务，其他路径按前端路由处理。这也是 history 模式下，try_files 全部回退到 index.html 需要配合的规则之一——如果/api/login也被回退到 index.html，前后端接口就废了。配置大约是这样：

location /api/ { proxy_pass http://backend-server:8080; } location / { try_files $uri $uri/ /index.html; }

基本思路就是：先给后端接口一条明确的路，再把剩余部分全部交给前端路由。

6.4 多入口项目的路由拆分建议

最后聊一下工程化上的一种特殊场景：一个前端代码仓库，需要部署成多个站点，每个站点的页面集合不同。比如一个项目既有 C 端商城，又有 B 端管理后台，两个入口部署在不同域名。

这种场景下，不建议把 C 端和 B 端的全部路由写进一个 router 实例。推荐做法是：同一个代码仓库建两个入口文件（main-c.js和main-b.js），各自创建独立的 router 实例，挂载各自的路由表。这样两个站点代码共用组件库，但路由和页面集合完全隔离。

打包配置对应调整vue.config.js或 Vite 的多入口配置，产物是两个独立的站点包。维护的时候，共用逻辑放公共目录，站点特有逻辑放各自目录。这种划分方式在多业务线的团队里很好用。

7. 从一个需求到完整方案：我的一些个人经验

回到最开始的需求：“Vue 中如何写两个不同的 URL 访问不同的组件页面”。从这个需求出发，一路扩展到路由参数、嵌套路由、命名视图、动态路由、守卫拦截、权限控制、工程化组织，核心结论其实只有一句：URL 与组件的映射关系不是写死在一段 if 逻辑里的，而是通过路由表这个统一配置中心来管理的。你只需要按照业务规则，把路由表设计清楚，Vue Router 会替你完成从 URL 解析到组件渲染的全过程。

根据我个人经验，给两条实际的建议。

第一，不要被“两个 URL”这个问题局限住。你能写两个 URL 映射两个组件，就意味着你能写 N 个 URL 映射 N 个组件。当 N 变大时，真正重要的是路由表的组织能力：路径命名是否规范、meta 信息是否齐全、动态路由是否按权限挂载、嵌套层级是否清晰。这些问题趁项目小时想清楚，比等项目大到不敢重构时再动手，成本要低一个数量级。

第二，如果你用的是 Vue 3 + Vue Router 4，建议把官方文档里的“导航守卫”和“动态路由”两节完整看一遍。很多网上博客只讲了基础用法，而真实项目里你遇到的“刷新后 404”“跳转后数据不对”“动态路由不生效”这些问题，答案都藏在原生文档里。把文档读透，比收集各种零散技巧要高效得多。

最后分享一个我最近在实际项目里用得很顺手的小技巧：在业务组件里，统一封装一个导航方法，所有跳转都走这一层封装。这样后续无论是要增加埋点统计、全局 loading 还是统一错误处理，只需要改封装方法一处，不用全项目搜索路由跳转代码。项目规模上来后，这个习惯能省非常多的排查时间。

希望这篇从基础到工程化的梳理，能帮你把这个需求背后的知识体系补齐。有具体踩坑的案例，欢迎在评论区和我交流。