Vue Router路径通配符问题：/manage/*路径返回按钮显示失效

你遇到的问题很典型——直接用this.$route.path === "/manage/*"做字符串比较是行不通的，因为这里的*只是普通字符串字符，不是Vue Router路由规则里的通配符。路由规则里的*是用来定义路由匹配范围的，不能直接拿来和当前路径做相等判断。

给你几个实用的解决方案：

方案一：使用正则表达式匹配 #

通过正则精准匹配/manage/开头的子路径，同时排除/manage本身：

computed: {
  showBackButton() {
    // 匹配/manage/users、/manage/settings等子路径，不匹配/manage
    return /^\/manage\/.+$/.test(this.$route.path);
  }
}

正则说明：^\/manage\/确保路径以/manage/开头，.+$保证后面至少有一个字符，完美避开/manage和/other路径。

方案二：用字符串方法判断（更直观） #

直接通过startsWith检查路径前缀，同时排除/manage本身：

computed: {
  showBackButton() {
    const currentPath = this.$route.path;
    // 满足：以/manage/开头，并且不是/manage本身
    return currentPath.startsWith('/manage/') && currentPath !== '/manage';
  }
}

这个方法代码可读性更高，不需要写正则，适合简单的路径判断场景。

方案三：利用Vue Router的路由匹配记录 #

如果你在路由定义里已经有/manage/*这条规则，可以通过$route.matched数组检查当前路由是否匹配该规则：

// 假设你的路由定义如下：
const routes = [
  { path: '/manage', component: Manage },
  { path: '/manage/*', component: ManageChild },
  { path: '/other', component: Other }
];

// 计算属性里判断
computed: {
  showBackButton() {
    // 检查匹配记录中是否包含/manage/*这条路由
    return this.$route.matched.some(route => route.path === '/manage/*');
  }
}

这个方法依赖你路由定义的结构，适合路由层级比较清晰的场景。

推荐优先用方案二，简单直接，不需要额外依赖路由配置~

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