Routed ons-page are always hidden when rendering with Nuxt.js
-
I manually config the vue-router of Nuxt and try to render pages using layout-pages way.
Layouts are rendered but the index page is hidden because of lack of the shown attribute. The :index.sync prop seems to not change when debugging with devtools.
Are there any way to fix it?Here is my default layout template: (This ons-page is OK)
<template> <v-ons-page> <v-ons-tabbar swipeable> <nuxt slot="pages"/> <v-ons-tab v-for="(tab, idx) in tabs" icon="app-menu" :label="tab.label" :key="idx" :active="$route.name === tab.name" @click.prevent="$router.push({name: tab.name})"/> </v-ons-tabbar> </v-ons-page> </template>
Here is the index: (Lack the shown is always missing, regardless routing)
<template> <v-ons-page shown> <v-ons-list modifier="dark"> <component :is="floor.name" :floor="floor.data" v-for="floor in floors" :key="floor.id"/> </v-ons-list> </v-ons-page> </template>
The routing:
const index = () => import('~/pages/index.vue').then(m => m.default || m) const info = () => import('~/pages/info.vue').then(m => m.default || m) export function createRouter() { return new Router({ mode: 'hash', routes: [ { path: '/', redirect: '/index' }, { path: '/index', name: 'index', component: index }, { path: '/info', name: 'info', component: info } ] }) }