diff --git a/package.json b/package.json
index fb440def37b..ec554fc702b 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "5.0.0",
     "ora": "3.0.0",
+    "path-to-regexp": "2.4.0",
     "portfinder": "1.0.13",
     "postcss-import": "11.1.0",
     "postcss-loader": "2.1.6",
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index ec84cb31276..32a8fb694d4 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -11,6 +11,7 @@
 
 <script>
 import { generateTitle } from '@/utils/i18n'
+import pathToRegexp from 'path-to-regexp'
 
 export default {
   data() {
@@ -29,7 +30,15 @@ export default {
   methods: {
     generateTitle,
     getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
+      const { params } = this.$route
+      let matched = this.$route.matched.filter(item => {
+        if (item.name) {
+          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+          var toPath = pathToRegexp.compile(item.path)
+          item.path = toPath(params)
+          return true
+        }
+      })
       const first = matched[0]
       if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
         matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)