Vue Router切换URL时组件不渲染问题求助

在Vite + Vue Router项目中，点击router-link切换URL后，地址栏URL已改变，但页面内容始终保持不变。

1. 根组件缺少路由出口<router-view> #

Vue Router需要通过<router-view>来渲染当前匹配的路由组件，你的App.vue直接固定渲染Login组件，导致路由切换时没有容器展示新组件。

修正后的App.vue：

<template>
  <!-- 路由匹配到的组件会渲染到这里 -->
  <router-view />
</template>

2. 路由配置错误：将根组件作为路由页面 #

你的router.js里把App.vue设为根路径的组件，但App是整个应用的根容器，不应作为路由页面组件。需将Login组件设为根路径对应的路由组件。

修正后的router.js：

import { createRouter, createWebHistory } from 'vue-router';
import Login from './Login.vue';
import SignUp from './Pages/SignUp.vue'

const routes = [
  { path: '/', name: 'Login', component: Login },
  { path: '/signup', component: SignUp }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 验证路由跳转逻辑 #

你的Login.vue中router-link的写法是正常的，完成以上两点修正后，点击"Sign Up"即可正常跳转到SignUp页面。

• 根组件必须添加<router-view>作为路由组件的渲染容器
• 路由配置需使用页面级组件（如Login、SignUp），而非根组件App

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