Router-link点击后URL变更但页面未跳转至指定组件问题

点击按钮后URL已发生变化，但页面并未渲染monthlyIncomeStatementPrint组件。相关代码如下：

页面模板代码 #

<td><ion-button expand="block">
<router-link :to="{name: 'getMonthlyIncome', params : {cMonthcsid: SelectedMonthandYear} }">Print</router-link>
</ion-button></td>

路由配置代码 #

{
  path: '/bonus/monthlyIncomeStatementPrint',
  name: 'getMonthlyIncome',
  component: monthlyIncomeStatementPrintPage,
  props: true,
}

排查与解决方法 #

• 确认路由出口存在：检查根组件或当前页面的父组件中是否包含<router-view>标签，这是Vue Router渲染匹配组件的必要容器，缺失的话组件无法显示。
• 验证组件导入正确性：确保monthlyIncomeStatementPrintPage组件已正确导入到路由配置文件中，导入路径需与组件实际位置一致，例如：

  import monthlyIncomeStatementPrintPage from '@/views/bonus/monthlyIncomeStatementPrint.vue'
  

• 检查参数传递与路由匹配：确认SelectedMonthandYear的类型、格式与路由参数cMonthcsid要求一致；可尝试显式定义props传递逻辑，避免隐式传递可能的问题：

  {
    path: '/bonus/monthlyIncomeStatementPrint',
    name: 'getMonthlyIncome',
    component: monthlyIncomeStatementPrintPage,
    props: route => ({ cMonthcsid: route.params.cMonthcsid })
  }
  

• 排查路由守卫拦截：查看全局导航守卫（beforeEach）或该路由的专属守卫（beforeEnter），是否存在阻止组件渲染的逻辑，比如未授权校验、异步操作未完成等。
• 尝试编程式导航替代：将<router-link>替换为编程式导航，避免嵌套组件可能的事件冲突：
  页面模板修改为：

  <td>
    <ion-button expand="block" @click="goToPrintPage">Print</ion-button>
  </td>
  

  组件方法添加：

  methods: {
    goToPrintPage() {
      this.$router.push({ 
        name: 'getMonthlyIncome', 
        params: { cMonthcsid: this.SelectedMonthandYear } 
      })
    }
  }
  

• 检查组件渲染报错：打开浏览器开发者工具的控制台，查看是否存在组件内部的语法错误、依赖缺失等报错，这类问题会导致组件无法正常渲染。

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