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

但是我遇到了这个错误：

$节点--experimental-modules test.js   （节点：13688）实验警告：ESM模块加载程序是实验性的。   C：\ xampp \ htdocs \从虚拟路由器中提取路由\ test.js：1   （功能（导出，需求，模块，__ filename，__ dirname）{从>“ ./src/js/router.js”导入路由器；                                                                       ^^^^^^

SyntaxError：意外的标识符      使用新脚本（vm.js：80：7）      在createScript（vm.js：274：10）      在Proxy.runInThisContext（vm.js：326：10）      在Module._compile（内部/模块/cjs/loader.js:664:28）      在Object.Module._extensions..js（内部/模块/cjs/loader.js:712:10）      在Module.load（internal / modules / cjs / loader.js：600：32）      在tryModuleLoad（内部/模块/cjs/loader.js:539:12）      在Function.Module._load（内部/模块/cjs/loader.js:531:3）      在createDynamicModule（内部/模块/esm/translators.js:73:15）      在Object.meta.done（内部/模块/esm/create_dynamic_module.js:42:9）

问题

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

Answer 1

在此site上有一个示例将所有路由作为链接数组获得：

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, '');

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

1 个答案: