framework7 vue简单项目中路由'/'的参考索引/home/主视图答案

【问题标题】：Reference index / home / main view in framework7 vue simple project for route '/'framework7 vue简单项目中路由'/'的参考索引/home/主视图
【发布时间】：2018-11-15 11:26:23
【问题描述】：

我创建了一个项目，基于：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...

我尝试过的任何方法都没有奏效...任何提示/想法表示赞赏

【问题讨论】：

标签： vue.js html-framework-7

【解决方案1】：

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

<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>

然后将“/”的路由添加到新的 page-home 组件...

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

...


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

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

【讨论】：