我想知道vue.js如何使路由器具有动态路由而不是静态路由，从而基于October静态菜单项和Pages呈现菜单？
感谢您的帮助。
[在十月的后端，我使用常规MDBootstrap及其以下部分来渲染基于“静态页面”和“菜单”的动态菜单：
<!-- Navbar Logo -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{% if staticMenu.menuItems %}
{% set items = staticMenu.menuItems %}
<!-- Links -->
<ul class="navbar-nav mr-auto">
{% for item in items %}
<li class="nav-item {{ item.isActive or item.isChildActive ? 'active' : '' }}
{{ item.items ? 'dropdown btn-group' : '' }}"
>
<a class="nav-link {% if item.items %}dropdown-toggle {% endif %}"
{% if item.items %} id="dropdownMenu{{ item.title|replace({' ':'-'}) }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{% endif %}
href="{{ item.url }}"
>
{{ item.title }}
{% if item.items %}<span class="sr-only">(current)</span>{% endif %}
</a>
{% if item.items %} <!-- Sous-menu -->
<div class="dropdown-menu dropdown-primary"
aria-labelledby="dropdownMenu{{ item.title|replace({' ':'-'}) }}">
{% for child in item.items %}
<a class="dropdown-item" href="{{ child.url }}">{{ child.title }}</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
<!-- Search form -->
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-primary"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item {{ this.page.baseFileName == 'login' ? 'active' : '' }}" href="{{ 'login'|page }}">
{% if not user %}
Login
{% else %}
My profile
{% endif %}
</a>
{% if user %}
<a class="dropdown-item" data-request="onLogout" data-request-data="redirect: '/logout'">Sign out</a>
{% endif %}
</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
如果更改后端项目，则项目将正确呈现和修改。
现在，我想使用MDB Vue将前端切换到Vue.js应用程序。
在示例路线中，路线始终是静态的，在漂亮的Watch + Learn Rentacar应用程序中，路线也始终是https://watch-learn.com/creating-rent-car-app-vue-and-october/creating-rentacar-app-with-vue-and-october-homepage-ui
我制作了一个带有以下示例（https://mdbootstrap.com/docs/vue/navigation/navbar）的菜单组件。现在已经渲染了，我想知道如何在vue组件中像Twig一样解析后端项目???
菜单组件来源（静态）为：
<template>
<div>
<!--Navbar-->
<mdb-navbar dark color="primary" name="Your Logo" href="#">
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item to="/navigation/navigation-v1">Version 1</mdb-nav-item>
<mdb-nav-item to="/navigation/navigation-v2" active>Version 2</mdb-nav-item>
<mdb-nav-item to="/navigation/navigation-v3">Version 3</mdb-nav-item>
<mdb-nav-item to="/navigation/navigation-v4">Version 4</mdb-nav-item>
<!-- mdbDropdown -->
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle slot="toggle" tag="a" navLink color="primary" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
<!-- Search form -->
<form>
<mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
</mdb-navbar-toggler>
</mdb-navbar>
<!--/.Navbar-->
</div>
</template>
<script>
import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput } from 'mdbvue';
export default {
name: 'NavigationPage',
components: {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbNavbarToggler,
mdbDropdown,
mdbDropdownItem,
mdbDropdownMenu,
mdbDropdownToggle,
mdbInput
},
mounted() {
document.getElementById("main-navbar").style.height = '60px';
},
beforeDestroy() {
document.getElementById("main-navbar").style.height = null;
}
};
</script>
嗯，我现在在解决方案上取得了一些进步！在我的Vue.js应用程序中，我想获取菜单级别的JSON数据。根据我10月份插件中的帖子（How to get static page dropdown in OctoberCMS with get page tree?），我能够创建一条将数据发送到Vue.js的路由。
但是当我这样做时：
$theme = \Cms\Classes\Theme::getEditTheme();
$pageList = new \RainLab\Pages\Classes\PageList($theme);
$treePageList = $pageList->getPageTree(true);
return $treePageList;
我得到的结构太多了。如何将其简化为仅包含带有多级菜单的标题和URL的JSON数据？我想获得类似的东西：
"Sub pages" "sub-pages" +
"Child One" "child-1"
"Child Two" "child-2"
"Child Three" "child-3"
"Child Four" "child-4" +
"Sub Child" "sub-child"
"Forms" "forms" +
"Form Contact" "form-contact"
"test" "test"
感谢您的帮助！
请参阅此附件链接。
您需要做的是给您的路由命名：
{
path: '/page/:pageName',
name: 'sitePage',
component: SitePage
},