当前位置: 首页 > 知识库问答 >
问题:

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

有权
2023-03-14

我有一个导出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密钥?我想根据我的路由器路由生成一个站点地图。

共有1个答案

呼延英奕
2023-03-14

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

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, '');
 类似资料:
  • 我使用的反应路由器dom版本5.0.1一个简单的反应应用程序,我使用了汇总捆绑,这是我的路由器组件 问题是,它只在localhost:8000/处显示主路由,但当我尝试访问localhost:8000/hello或localhost:8000/登录时,会出现此错误 这是我的rollup.config };

  • 官方路由 对于大多数单页面应用,都推荐使用官方支持的vue-router库。更多细节可以看vue-router文档。 从零开始简单的路由 如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样: const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home

  • 我正在尝试这样的东西 但是,当没有子路由的路由可以完美工作时,这段代码不起作用 我如何解决第一段代码?

  • 我的目标是提交(调用/调用)我在Vuex存储中定义的突变。 商店。js 由于我将Vuex连接到我的应用程序,因此我可以使用,不会出现问题。 main.js 例如: omponent.vue 现在,我想从vue路由器路由文件中提交一些内容,使用方法: 例如路线。js 然而,当我尝试上述方法时,我得到了错误 网上有很多通过导入成功使用vuex getters的例子。而且,如果我导入,我可以看到我的整个

  • 我有一个路由器像下面: 以下是我想要实现的目标: 如果未登录,将用户重定向到 如果用户在登录后试图访问,请将其重定向到root 因此,现在我尝试在