如何仅从vue路由器中提取路由生成站点地图

Question

我有一个导出VueRouter实例的文件：

// src/js/router.js

import VueRouter from "vue-router";

export default new VueRouter({
  mode: "history",
  routes: [
    {
      name: "home",
      path: "/",
      component: "./component/Home.vue"
    },
    {
      name: "contact-us",
      path: "/contact-us",
      component: "./component/ContactUs.vue"
    }
  ]
});

尝试

我尝试执行此文件：

// test.js

import router from "./src/js/router.js";

使用节点：

node --experimental-modules test.js

但我遇到了这个错误：

$node-experiment-modules test.js（node：13688）experimentalwarning：ESM模块加载程序是实验性的。C:\xampp\htdocs\extract-routes-from-vue-router\test.js:1（函数（exports,required,module,__filename,__dirname){import router from>“./src/js/router.js”；^^^^^^^

SyntaxError：新脚本(vm.js:80:7)在createScript(vm.js:274:10)在Proxy.RuninthisContext(vm.js:326:10)在Module._Compile（内部/module/Cjs/Loader.js:664:28)在Object.Module._Extensions.js（内部/module/Cjs/Loader.js:712:10)在Module.Load（内部/module/Cjs/Loader.js:600:32)在tryModuleLoad（内部

问题

如何从路由器中仅提取path密钥？我想根据我的路由器路由生成一个站点地图。

Answer 1

此站点上有一个示例,可以将所有路由作为链接数组获取：

const router = new Router({ /* Your Router config go here */ });

function getRoutesList(routes, pre) {
  return routes.reduce((array, route) => {
    const path = `${pre}${route.path}`;

    if (route.path !== '*') {
      array.push(path);
    }

    if (route.children) {
      array.push(...getRoutesList(route.children, `${path}/`));
    }

    return array;
  }, []);
}

getRoutesList(router.options.routes, 'https://zigamiklic.com');

输出示例：

[
   'https://zigamiklic.com/home',
   'https://zigamiklic.com/settings/',
   'https://zigamiklic.com/settings/general',
   'https://zigamiklic.com/settings/profile',
   'https://zigamiklic.com/contact',
]

如果不需要前缀，可以这样使用：

getRoutesList(router.options.routes, '');