Vue Router页面加载异常求助：URL变化但页面不更新

核心问题 #

你的项目里缺少路由视图出口，Vue Router没有地方渲染匹配到的页面组件，这是导致URL变化但页面无更新、直接访问URL无法加载对应页面的根本原因。

解决方案 #

1. 在App.vue中添加<router-view>路由出口 #

修改App.vue的模板，加入<router-view>标签——这是Vue Router用来渲染匹配到的页面组件的容器：

<template>
  <div>
    <AppHeader />
    <AppBanner />
    <!-- 路由视图出口：匹配到的页面组件会在这里渲染 -->
    <router-view />
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader.vue";
import AppBanner from "./components/AppBanner.vue";
import AppFooter from "./components/AppFooter.vue";

export default {
  name: 'App',
  components: {
    AppHeader,
    AppBanner,
    AppFooter,
  },
}
</script>

如果AppMain组件是用来承载页面主体内容的，也可以将<router-view>放到AppMain组件内部，效果一致。

2. 跳转按钮使用<router-link>而非普通<a>标签 #

如果你的跳转按钮用的是普通<a>标签，会触发页面整页刷新，同时可能引发路由异常，需要替换为Vue Router提供的<router-link>：

<!-- 错误写法 -->
<a href="/policy">隐私政策</a>

<!-- 正确写法：直接指定路径 -->
<router-link to="/policy">隐私政策</router-link>

<!-- 推荐写法：使用命名路由，更易维护 -->
<router-link :to="{ name: 'PrivacyPolicy' }">隐私政策</router-link>

3. 验证直接访问URL的场景 #

添加<router-view>后，直接访问/policy或/terms时，路由会自动匹配对应的组件并渲染到视图出口，该问题即可解决。

额外检查点 #

• 确认router/index.js中的路径、组件导入路径无拼写错误
• 确认main.js中已正确调用app.use(router)（你的代码里已正确配置）

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