Vue.js Router点击router-link地址变化但页面不跳转问题排查

你的router配置、main.js中的路由注册逻辑均无语法问题，该故障的核心原因是：
根组件App.vue中缺失路由出口组件<RouterView />

Vue Router 工作时，匹配当前URL得到的页面组件，必须挂载到<RouterView />这个占位容器中才能完成渲染。你当前的App.vue模板仅包含顶部导航、侧边栏导航结构，没有预留组件渲染的位置，因此地址栏更新后，对应页面没有挂载入口，自然不会显示。

修复方案 #

直接在App.vue模板的主内容区域添加<RouterView />标签即可，参考修改后的模板结构：

<template>
  <div id="app">
    <nav class="main-nav">
      <div class="logo">my.company</div>
      <Burger></Burger>
    </nav>

    <Sidebar>
      <ul class="sidebar-panel-nav">
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </Sidebar>

    <!-- 路由出口：匹配到的路由组件将渲染在此处 -->
    <RouterView />
  </div>
</template>

补充排查项 #

如果添加<RouterView />后仍有异常，可逐一核对以下两点：

• 检查Sidebar组件（对应引入的topbar.vue）内部是否正确实现了默认插槽：你写在Sidebar标签内的导航链接依赖插槽渲染，如果Sidebar组件模板中没有写<slot />标签，导航链接不会正常挂载，可能导致路由跳转行为异常。
• 确认依赖版本匹配：Vue 3项目必须搭配4.x版本的vue-router，若误装了适配Vue 2的3.x版本vue-router，也会出现路由功能失效的问题。

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