VueJS 3+Quasar编程式路由跳转组件不渲染问题求助

问题原因 #

你的路由配置存在逻辑错误：/和/test都被定义为独立的顶级路由，且都使用了MainLayout.vue作为根组件。Vue Router在切换这两个路由时，会复用已存在的MainLayout组件实例，不会触发重新渲染，导致子组件TestPage无法被正确加载。只有手动刷新页面时，才会重新初始化组件实例，从而显示目标页面。

修复方案 #

修改路由配置，将/test作为MainLayout的子路由，而不是单独的顶级路由：

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      // 将/test移到这里作为子路由
      { path: 'test', name: 'test', component: () => import('pages/TestPage.vue') }
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

为什么这样能解决问题 #

当/test作为MainLayout的子路由时，切换路由只会更新MainLayout内部的<router-view>内容，Vue Router会正确加载对应的子组件TestPage，而不会复用整个布局组件导致渲染异常。

额外说明 #

你的router.push({name: 'test'})调用逻辑是正确的，无需修改。修复路由配置后，点击按钮跳转时，浏览器URL会更新，同时TestPage组件会自动渲染，无需手动刷新页面。

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