router.vue

<template>
  <div class="routes">
    <p>路径跳转导航:</p>
    <ul>
      <li v-for="item in routes" :key="item.Name">
        <span style="margin:10px" @click="to(item.path)">{{
          item.meta.title
        }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Router",
  data() {
    return {
      routes: []
    };
  },
  mounted() {
    const allRoutes = this.$router.options.routes;
    allRoutes.forEach(el => {
      if (el.children) {
        const parentPath = el.path;
        const temp = JSON.parse(JSON.stringify(el.children));
        const arr = temp.map(item => {
          item.path = parentPath + "/" + item.path;
          return {
            ...item
          };
        });
        this.routes.push(...arr);
      } else {
        if (el.meta.title !== "路径导航") {
          this.routes.push(el);
        }
      }
    });
    // this.routes.forEach(item => {
    //   console.log(item.meta.title + "http://8.131.244.76:81/front" + item.path);
    // })
  },
  methods: {
    to(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="scss" scoped>
.routes {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
</style>