Vue应用路由异常：URL始终带#，无法正常跳转页面

• 必须检查App.vue是否包含路由出口
  路由组件需要通过<router-view>标签作为渲染出口，要是没在App.vue里添加这个标签，所有路由内容都没法显示，只会停留在#路径。
  示例App.vue基础结构：

  <template>
    <div id="app">
      <!-- 所有匹配的路由组件都会在这里渲染 -->
      <router-view></router-view>
    </div>
  </template>
  

• 确认main.js中正确注册路由
  得确保在main.js里导入路由并挂载到Vue实例上，不然路由根本不会生效。
  示例main.js代码：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router/index.js'
  
  createApp(App)
    .use(router) // 必须调用此方法注册路由
    .mount('#app')
  

• 检查路由路径与组件文件一致性
  你的路由用了懒加载写法，先确认：

  • ../views/Register.vue和../views/Login.vue文件确实存在于对应目录
  • 路径大小写要匹配，Linux/macOS环境下区分大小写，别把views写成Views

• 临时替换懒加载排除问题
  可以先把懒加载改成直接导入的写法，排除懒加载配置的问题：

  // 替换路由里的懒加载代码
  {
    path: '/register',
    name: 'Register',
    component: Register // 用之前已经导入的Register组件
  },
  {
    path: '/login',
    name: 'Login',
    component: Login // 用之前已经导入的Login组件
  }
  

• 清除缓存重启项目
  有时候浏览器缓存或项目热更新异常会导致路由失效，关掉浏览器标签，重启Vue项目（npm run serve）后再测试。

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