参考索引 / 首页 / 框架中的主视图7 vue 路由'/'的简单项目

Question

我创建了一个基于以下内容的项目：https://github.com/framework7io/framework7-template-vue-simple...

在导航了几个子视图后，我需要能够导航回主视图。。。当我回击后堆栈中倒数第二个项目以及我对我提出的问题的建议时，它肯定是在尝试导航到/(https://github.com/framework7io/framework7-template-vue-simple/issues/7)，是参考路线/的主视图组件。

我的Vue/Framework7应用程序初始化为：

var vm = new Vue({
el: '#app',
data: function () {
return {
// Framework7 parameters here
f7params: {
root: '#app', // App root element
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'md', // Automatic theme detection,
stackPages: true,
domCache: true,
// App routes,
routes: [
{
path: '/submenu/category/:categoryId/',
component: 'ym-submenu',
}, {
path: '/submenu/menuitem/:menuitemId/',
component: 'ym-submenu',
}, {
path: '/',
component: 'app'
}]
},
rootAreas: [],
categories: [],
news: [],
searchResults: [],
submenuContent: []
};
},
created: function () {
console.log('Created Main App');
documentReady();
this.$on('rootmapsUpdated', function (arg) {
this.rootAreas = arg;
});
this.$on('categoriesUpdated', function (arg) {
this.categories = arg;
});
this.$on('newsUpdated', function (arg) {
this.news = arg;
});
this.$on('searchResultsUpdated', function (arg) {
this.searchResults = arg;
});
this.$on('submenuContentUpdated', function (arg) {
this.submenuContent = arg;
});
}
});

我不知道如何做到这一点。。。我已经尝试创建一个指向#app 的组件

Vue.component('app', {
template: '#app'
});

并使用路由到它

routes: [{
path: '/',
component: 'app'
},
...

我还尝试将this作为组件，并将new Vue()的结果分配给全局变量，然后将其作为组件。我还尝试过使用url:而不是component:和类似的templateUrl:来路由到index.html。。。

我试过的都没用。。。赞赏任何提示/想法

Answer 1

解决方案是保持我的主视图为空，但使用url="/"参数将内容路由到由过去的主视图组成的组件到<f7-view>标签，例如

<div id="app">
<f7-app :params="f7params">
<f7-view id="main-view" main url="/"></f7-view>
</f7-app>
</div>
<template id="page-home">
<f7-page>
<f7-navbar>
<div class="navbar-inner sliding">
<div class="header-logo-container"><img src="img/logo.png" class="logo"></div>
<div class="left back-btn"><a href="#" class="link icon-only invisible"><i class="material-icons">chevron_left</i></a></div>
<div class="right settings-btn"><a href="#" class="link icon-only"><i class="material-icons">settings</i></a></div>
</div>
</f7-navbar>
<f7-toolbar class="tabbar solid">
<ym-toolbar></ym-toolbar>
</f7-toolbar>
<ym-toplevelitems></ym-toplevelitems>
</f7-page>
</template>

然后将"/"的路由添加到新的主页组件。。。

routes: [ ...
{
path: '/',
component: 'page-home'
}]
...

Vue.component('page-home', {
template: '#page-home'
});

现在导航到/产生与进入应用程序相同的东西：D