[1520] Why does client side rendering wrong when i add routes from plugins?

HI there,

I have a problem when I need to add a path through a plugin. I will show my coding as below.

<!-- ~pages/category/_slug.vue -->
<template>
  <div>Category: {{ slug }}</div>
</template>

<script>
export default {
  validate ({ params }) {
    return /^\w+$/.test(params.slug)
  },
  data () {
    return {
      slug: 'default'
    }
  },
  asyncData ({ params }) {
    return {
      slug: params.slug
    }
  }
}
</script>

// nuxt.config.js
// ...
plugins: [
    '~plugins/routes'
]

// ~plugins/routes.js
import Category from '~pages/category/_slug.vue'

export default ({ app }) => {
  app.router.addRoutes([
    { path: '/:slug(cat)', component: Category }
  ])
}

when trying to access "/cat" route, why is the result displayed as Category: cat before it is changed to Category: default at the client side?,

But when i try to access "/category/cat" route is normally. Category: cat

How to resolve this problem?