mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
add component nuxt-child
This commit is contained in:
parent
1c4e767850
commit
b6b1fc3073
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Dynamic nested route example</h1>
|
||||
<router-view></router-view>
|
||||
<nuxt-child></nuxt-child>
|
||||
</div>
|
||||
</template>
|
||||
|
38
lib/app/components/nuxt-child.vue
Normal file
38
lib/app/components/nuxt-child.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<transition :name="transition.name" :mode="transition.mode">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'nuxt-child',
|
||||
props: {
|
||||
transition: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
mode: 'out-in', // out-in ou in-out
|
||||
name: 'fade',
|
||||
type: '', // animation ou transition
|
||||
enter: null, // isFunc = js, is String = css
|
||||
enterActive: '',
|
||||
beforeEnter: null, // Func
|
||||
afterEnter: null,
|
||||
enterCancelled: null,
|
||||
leave: null, // isFunc = js, is String = css
|
||||
leaveActive: '',
|
||||
beforeLeave: null, // Func
|
||||
afterLeave: null,
|
||||
leaveCancelled: null,
|
||||
appear: null, // isFunc = js, is String = css
|
||||
appearClass: '',
|
||||
appearActiveClass: '',
|
||||
beforeAppear: null,
|
||||
afterAppear: null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -5,11 +5,14 @@ import Meta from 'vue-meta'
|
||||
import router from './router.js'
|
||||
<% if (store) { %>import store from '~store/index.js'<% } %>
|
||||
import NuxtContainer from './components/nuxt-container.vue'
|
||||
import NuxtChild from './components/nuxt-child.vue'
|
||||
import Nuxt from './components/nuxt.vue'
|
||||
import App from '<%= appPath %>'
|
||||
|
||||
// Component: <nuxt-container>
|
||||
Vue.component(NuxtContainer.name, NuxtContainer)
|
||||
// Component: <nuxt-child>
|
||||
Vue.component(NuxtChild.name, NuxtChild)
|
||||
// Component: <nuxt>
|
||||
Vue.component(Nuxt.name, Nuxt)
|
||||
|
||||
|
@ -150,6 +150,7 @@ function * generateRoutesAndFiles () {
|
||||
'router.js',
|
||||
'server.js',
|
||||
'utils.js',
|
||||
'components/nuxt-child.vue',
|
||||
'components/nuxt-container.vue',
|
||||
'components/nuxt.vue',
|
||||
'components/nuxt-loading.vue'
|
||||
|
Loading…
Reference in New Issue
Block a user