代码实现

首先需要新建一个组件

<template>
  <div class="dashboard-container">
    <button @click="Addroute">addRoute</button>
    <div class="dashboard-text">name: {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import qq from './qq.vue'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    // addRoutes ==实现动态添加路由规则
    // 动态添加 ==只是可以进行路由匹配  进入当前页面 不会添加在路由规则里面
    Addroute() {
      this.$router.addRoutes([{
        path: '/abc',
        component: qq
      }])
      console.log(this)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

qq.vue

<template>
  <div>
    这里可以写你需要的内容
  </div>
</template>
<script>
export default {
  name: 'VueAdminTemplateMasterQq',
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>

动态添加路由匹配规则

代码实现