Framework 7 页面未加载
Framework 7 pages not loaded
我尝试使用 Framework7 核心(没有节点、React、Vue)创建一个网络应用程序。
我发现点击index.html底部的标签页没有显示。
Here 你可以看到我的文件(来自 framework7 模板)。
我不明白为什么它们不动态加载。
<!-- Catalog View -->
<div id="view-catalog" class="view view-init tab" data-view="catalog" data-url="/catalog/">
<!-- Catalog page will be loaded here dynamically from /catalog/ route -->
</div>
<!-- Settings View -->
<div id="view-settings" class="view tab">
<!-- Settings page will be loaded here dynamically from /settings/ route -->
</div>
路由数组:
routes = [
{
path: '/',
url: '../pages/index.html',
},
{
path: '/about/',
url: '../pages/about.html',
},
{
path: '/catalog/',
componentUrl: '../pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: '../pages/product.html',
},
......
]
你的问题只在路线上,你需要改变你的路线
{
path: '/catalog/',
componentUrl: '../pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: '../pages/product.html',
},
对此:
{
path: '/catalog/',
componentUrl: './pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: './pages/product.html',
},
它将完美运行,当您使用 ..
时,您将后退一步,这样您就不会找到页面,使用 .
时,您将直接访问 Web 目录.. .
我尝试使用 Framework7 核心(没有节点、React、Vue)创建一个网络应用程序。
我发现点击index.html底部的标签页没有显示。
Here 你可以看到我的文件(来自 framework7 模板)。
我不明白为什么它们不动态加载。
<!-- Catalog View -->
<div id="view-catalog" class="view view-init tab" data-view="catalog" data-url="/catalog/">
<!-- Catalog page will be loaded here dynamically from /catalog/ route -->
</div>
<!-- Settings View -->
<div id="view-settings" class="view tab">
<!-- Settings page will be loaded here dynamically from /settings/ route -->
</div>
路由数组:
routes = [
{
path: '/',
url: '../pages/index.html',
},
{
path: '/about/',
url: '../pages/about.html',
},
{
path: '/catalog/',
componentUrl: '../pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: '../pages/product.html',
},
......
]
你的问题只在路线上,你需要改变你的路线
{
path: '/catalog/',
componentUrl: '../pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: '../pages/product.html',
},
对此:
{
path: '/catalog/',
componentUrl: './pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: './pages/product.html',
},
它将完美运行,当您使用 ..
时,您将后退一步,这样您就不会找到页面,使用 .
时,您将直接访问 Web 目录.. .