我正在运行一个 PHP 应用程序,我需要一些页面才能完全交换 View 。我需要一个成熟的路由器,因为我需要利用历史模式 API。
使用 Vue 路由器做这样的事情很容易:
const router = new VueRouter({
routes: [
{ path: '/', component: DefaultView },
{ path: '/map', component: MapView }
]
});
在 PHP 中,我只需像这样加载路由器并将 PHP 生成的后端数据传递给两个 View :
<router-view data="<?= $data ?>"></router-view>
这适用于一个页面,但如果我想要另一个页面具有完全不同的路由集怎么办?路由器需要知道它所在的页面,以便区分不同的路由集。
我要么需要检查 prop 中传递的 URL,就像我已经对数据所做的那样。但我不确定如何从路由器读取 Prop 数据。
处理这个问题的好方法是什么?
最佳答案
你只需创建两个命名的router-views
并将不同的数据传递给这些路由器 View 。
<router-view class="view one"></router-view> //default
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
},
{
path: '/map',
components: {
default: Foo2,
a: Bar2,
b: Baz2
}
}
]
或者使用嵌套路由 View //children
routes: [
{ path: '/page1', component: page1,
children: [
{
path: 'route1',
component: route1
},
{
path: 'route2',
component: route2
}
]
},
{ path: '/page2', component: page2, ... }
]
关于javascript - 使用 vue 的多个路由器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47591679/