diff --git a/package.json b/package.json
index 6375852..188b9c6 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,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.16",
     "postcss-import": "12.0.0",
     "postcss-loader": "2.1.6",
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 11ce3a5..6ca6291 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import pathToRegexp from 'path-to-regexp'
+
 export default {
   data() {
     return {
@@ -26,7 +28,15 @@ export default {
   },
   methods: {
     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 !== 'dashboard') {
         matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)