Vue3路由问题：点击链接URL更新但页面不切换求助

1. 检查路由出口配置 #

确保根组件（通常是App.vue）中存在<router-view />标签，这是路由组件的渲染容器，缺失的话路由匹配成功也不会更新页面：

<template>
  <Navbar />
  <router-view /> <!-- 必须保留该标签 -->
</template>

2. 确认导航链接使用router-link #

Navbar组件中不能用原生<a>标签跳转，必须使用Vue路由提供的router-link实现无刷新跳转：
错误写法：

<a href="/Gallery">Gallery</a>

正确写法：

<router-link to="/Gallery">Gallery</router-link>

3. 校验路由配置文件 #

检查路由配置文件（如router/index.js）的路径拼写、组件导入是否正确：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Gallery from '../views/Gallery.vue' // 确认组件路径无误

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/Gallery', // 注意URL路径大小写敏感
    name: 'Gallery',
    component: Gallery
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

4. 验证路由挂载是否正确 #

检查主JS文件（如main.js），确认路由已挂载到Vue实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router) // 必须调用use(router)完成挂载
  .mount('#app')

5. 排查路由守卫拦截问题 #

如果配置了全局路由守卫（router.beforeEach），检查是否未正确调用next()导致跳转被拦截：
错误写法：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Home') {
    // 未调用next()，路由无法继续
  }
})

正确写法：

router.beforeEach((to, from, next) => {
  // 业务逻辑处理后必须调用next()
  next()
})

6. 检查嵌套路由配置（若涉及） #

如果Gallery是嵌套路由，父路由对应的组件中必须包含<router-view />，否则子组件无法渲染。

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