CANJS路由异常：相似命名路由切换后页面加载代码未执行

这种问题我之前在项目里踩过坑！大概率是路由组件复用或者路由路径匹配优先级的问题导致的，下面给你几个实用的解决思路：

1. 先检查路由路径的匹配顺序 #

如果你的路由配置里，adminProgramSkus的路径规则写在adminPrograms前面，而且两者路径有重叠（比如/admin/programs/:id/skus和/admin/programs），Router可能会优先匹配到前面的路由，导致你切换时看似URL变了，但实际还是渲染了旧组件。

一定要把更具体的路由（带参数或更长的路径）放在更通用的路由前面，比如：

// 正确的配置顺序
const routes = [
  {
    path: '/admin/programs/:id/skus',
    name: 'adminProgramSkus',
    component: AdminProgramSkus
  },
  {
    path: '/admin/programs',
    name: 'adminPrograms',
    component: AdminPrograms
  }
]

如果你的路径是类似/admin/programSkus和/admin/programs这种无参数的，也要确保没有使用模糊匹配的规则（比如带*的通配符）干扰匹配。

2. 强制组件重新渲染（解决复用问题） #

Router默认会复用相同的组件实例，当你切换的两个路由共享同一个组件（或者父组件）时，组件的created/mounted等生命周期钩子不会重新触发，看起来就是“加载代码没执行”。这里有两个简单的解决办法：

方法A：给<router-view>加唯一key #

在你的根组件里，给<router-view>绑定:key="$route.fullPath"，这样每次路由变化都会强制销毁旧组件、创建新组件，生命周期钩子会正常执行：

<router-view :key="$route.fullPath"></router-view>

这个方法简单粗暴，适合场景不复杂的情况，唯一的小缺点是会牺牲一点点性能（毕竟每次都重建组件）。

方法B：监听路由变化手动触发加载 #

如果不想重建组件，可以在组件内部监听$route的变化，手动执行加载逻辑：

export default {
  // ...
  watch: {
    '$route' (to, from) {
      // 这里调用你的页面加载方法，比如重新获取数据
      this.loadPageData()
    }
  },
  methods: {
    loadPageData() {
      // 你的页面加载逻辑
    }
  }
}

如果是Vue3的话，用watch API：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    watch(route, (to, from) => {
      loadPageData()
    })
    
    function loadPageData() {
      // 加载逻辑
    }
  }
}

3. 核对路由名称与组件的映射 #

有时候可能是手滑写错了路由配置里的name或者component，导致切换路由时其实还是渲染了同一个组件。仔细检查你的路由配置，确保adminProgramSkus和adminPrograms对应的是完全不同的组件：

const routes = [
  {
    name: 'adminProgramSkus',
    path: '/admin/program-skus',
    component: AdminProgramSkus // 确认这个是SKU页面组件
  },
  {
    name: 'adminPrograms',
    path: '/admin/programs',
    component: AdminPrograms // 确认这个是Programs页面组件
  }
]

4. 检查路由守卫是否有拦截 #

如果你的项目里用了全局路由守卫或者路由级别的守卫（比如beforeRouteUpdate、beforeEnter），要检查这些守卫里的逻辑是否有误，比如有没有错误的条件判断阻止了组件的更新或加载逻辑的执行。

你可以先从调整路由顺序或者给router-view加key开始排查，这两个是最常见的解决这类问题的办法。

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