几日前第一次使用 Pages （基于边缘技术的网站托管平台），为此也算是第一次用 Vue3 编写出第一个页面……

前因

根据bing到的搜索结果，大部分都是大差不差的是，检查有没有拼写错一些单词。一顿仔细查看之下就是没有发现拼写错误，最后还是通过 AI 工具的多次改变搜索词下等到一个有用的操作。

后果

AI 搜索给出的处理步骤

1、先确认最小可运行示例

App.vue

<template>
  <router-view />
</template>

main.js

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

index.js

    import { createRouter, createWebHistory } from 'vue-router'
     
    // 路由
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue')
      }
    ]
     
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes // ❗注意这里一定是 routes，不是 routers 
    })
     
    export default router

如果这段最小示例能正常渲染 Home.vue，说明项目骨架没问题，继续看第2步；如果连这段都不渲染，直接跳到第5步。

2、肉眼查拼写

createRouter ✅
routes ✅（不要写成 routers）
component ✅（不要写成 components）
router-view ✅（不要写成 router-views）

肉眼看不出来就把路由配置 console.log(JSON.stringify(routes)) 打印出来，再核对一遍。

3、查根节点是否挂载 router

const app = createApp(App)
app.use(router) // ❗这句别漏 
app.mount('#app')

4、查容器元素是否存在

index.html

<div id="app"></div>

确保 mount('#app') 里的选择器跟它一致。

5、“玄学”依赖问题（cnpm导致）

如果你用的是 cnpm / pnpm / yarn，可能会遇到依赖被软链后 vue-router 识别不到的问题。

最快验证方法

# 1. 先把原来的删掉 
npm uninstall vue-router 
 
# 2. 用 npm（不要用 cnpm）重新装
npm install vue-router@4 
 
# 3. 清缓存+重启 devServer
npm run dev     # vite项目 
# or 
npm run serve   # vue-cli项目 

6、仍不渲染？最后三板斧

1. Console & Network：看有没有报错、有没有 chunk404。
2. DevTools → Components → RouterView：确认组件树里 RouterView 是否出现。
3. Vue DevTools → Routes：看当前路由是否匹配成功。

心得

没想到还真的就是玄学问题导致的，因为我在写好一个页面并正常时候后，在后面决定新增一个页面。一开始使用<a>标签，每次切换页面都会“闪烁”刷新一下页面。后面改用<router-view />渲染才初露端倪。

因为我虽然我已经将npm配置成镜像源，但是在安装vue-router时用的又是cnpm，这就导致出现了这个玄学 Bug 了。

ChiuYut

2025年08月18日