我正在尝试使用framework7和vue构建一个应用程序。 一切都很好,只不过当我启动该应用程序时,它没有加载route.js上指定的组件。 我希望它加载由根URL指定的组件。 我怎样才能做到这一点?

main.js

new Vue({
  el: '#app',

  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
     material: true,
     swipePanel: 'left',
     routes: Routes,
     pushState: true,
     animateNavBackIcon: true,
     input: {

     }
   },
 })

routes.js

export default [
    {
    path: '/',
    component: require('./assets/vue/pages/home.vue')
    }
]

#1楼 票数:0

我决定在framework7初始化上使用preroute对象,这样,即使在加载“ /”路由之前,我也可以操纵请求并重定向到特定路由。 在此处阅读有关预布线的更多信息: https : //framework7.io/docs/init-app.html

#2楼 票数:0

我不确定是否与您的情况相同:

第一次,我没有在application.html添加f7-view,并且路由没有起作用。

添加<f7-view main> ,该路线开始工作并显示页面。

我认为f7-view几乎像router-view ,是路由结果的输出接口。

如果您已经添加了f7-view ,则忽略此答案:-)

  ask by Kevin Korir translate from so

未解决问题?本站智能推荐:

1回复

如何在Framework7 + Vue应用程序中导航到路线?

如何在Framework7和VueJs应用程序中导航到路线。 我想显示一个slpash屏幕并在两秒后导航到下一页。 代码粘贴在下面。 注意:这是应用程序组件(Main.vue)。
1回复

如何在Framework7 Vue中使用身份验证

我正在使用最新的Framework7 Vue Webpack入门包。 我的默认页面('/')是登录页面。 我的计划是在请求应用程序中的任何页面后立即运行xhr请求。 因此,我尝试将isLoggedIn()调用放入onF7Ready(f7)中。 如果登录,我想我会用它来将用户带
2回复

在Framework7-Vue中管理道具时遇到麻烦

我在理解如何将道具传递到页面组件时遇到问题 有了Vue,我就能做到 并像这样使用它<name v-bind:example="parentData">{{example}}</name> 并且可以正常工作,但是在framework7-vue中,每个页面
1回复

如何通过Vue.js将图像URL绑定到Framework7列表项“媒体”属性?

我正在使用Framework7的Vue插件显示鸣叫列表。 这些推文存储在data()的数组中: 标记(Jade)如下所示: 这非常有效,并且可以将阵列中所有推文的列表打印到GUI。 Framework7的f7-list组件现在还允许添加如下图像: 每个图像都存储在tw
1回复

Framework 7 Vue中的路由防护

当我执行以下操作时: 一切正常,但是如果我这样做: 然后,无论异步如何,组件都会始终解析。 当我尝试使用beforeEnter函数而不是async时,也是如此。 如果组件是在路线的顶层定义的,则始终会解析。 如何在路由上放置身份验证中间件?
1回复

Framework7组件在Vue2中不起作用

我想在Vue应用程序中添加f7时间轴组件。 我在app.js文件中添加了Framework7和Framework7Vue。 其他Framework7组件(例如<f7-button>和<f7-progressbar>可以正常工作。 但是,当我使用<f7-ti
2回复

无法使用 $el 在 Vue js 中获取 clientHeight

我想使用以下代码获取我的应用程序的客户端高度: 在console.log(this)我可以看到我的主要元素和clientHeight是702 ,但console.log(this.$el.clientHeight)结果是0 。 此外,我正在使用 Framework7 来创建我的应用程序 UI。
1回复

[Framework7 Vuejs]使用v-for将asyn数据绑定到模板

我想通过调用api使用axios显示每个id(1、2、3)的总视图,如下所示: 如何使用vue异步数据来显示视图数而不是{} ?