VueJS中如何在JS文件中访问$route？面包屑场景问题求解

方案一：将面包屑定义为接收路由参数的函数 #

把静态数组改成动态函数，在组件中调用时传入当前路由实例，实现link的动态生成：

1. 修改breadCrumb.js：

export const getUserBreadCrumb = (route) => {
  return [
    { title: 'User List', link: `/${route.params.menuId}/user` },
    { title: 'Create User' }
  ]
}

2. 在User.vue中使用：

import { getUserBreadCrumb } from '@/system/breadCrumb';

export default {
  data() {
    return {
      breadCrumb: getUserBreadCrumb(this.$route)
    }
  },
  // 监听路由变化，实时更新面包屑
  watch: {
    '$route'(newRoute) {
      this.breadCrumb = getUserBreadCrumb(newRoute)
    }
  }
}

方案二：拆分静态与动态部分，在组件中补全动态值 #

把面包屑的静态标题放在JS文件，动态路由部分在组件中处理：

1. 修改breadCrumb.js：

export const userBase = [
  { title: 'User List', link: '' },
  { title: 'Create User' }
]

2. 在User.vue中处理动态link：

import { userBase } from '@/system/breadCrumb';

export default {
  data() {
    return {
      breadCrumb: [...userBase] // 拷贝数组避免修改原数据
    }
  },
  created() {
    this.updateBreadCrumbLink(this.$route)
  },
  watch: {
    '$route'(newRoute) {
      this.updateBreadCrumbLink(newRoute)
    }
  },
  methods: {
    updateBreadCrumbLink(route) {
      this.breadCrumb[0].link = `/${route.params.menuId}/user`
    }
  }
}

方案三：导入全局路由实例（不推荐） #

通过导入项目的路由实例直接获取当前路由参数，但这种方式耦合性高，且路由变化时不会自动更新，仅适合简单场景：

1. 在路由配置文件（如router/index.js）导出实例：

const router = new VueRouter({
  // 路由配置
})
export default router

2. 修改breadCrumb.js：

import router from '@/router'

export const user = [
  { title: 'User List', link: `/${router.currentRoute.params.menuId}/user` },
  { title: 'Create User' }
]

3. 在User.vue中使用时，需监听路由变化手动更新：

import { user } from '@/system/breadCrumb';

export default {
  data() {
    return {
      breadCrumb: [...user]
    }
  },
  watch: {
    '$route'() {
      this.breadCrumb = [...user] // 重新赋值更新link
    }
  }
}

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