溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在Nuxt 中使用nuxt-child組件實(shí)現(xiàn)父頁面向子頁面?zhèn)髦?/h1>
發(fā)布時(shí)間：2020-11-06 14:39:18 來源：億速云 閱讀：1550 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)在Nuxt 中使用nuxt-child組件實(shí)現(xiàn)父頁面向子頁面?zhèn)髦?，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

在Nuxt 中使用nuxt-child組件實(shí)現(xiàn)父頁面向子頁面?zhèn)髦?><br/></p><p><img src=

<template>
 <div>
 <h3>父組件的頁面的內(nèi)容</h3>
 <ul>
  <!-- 進(jìn)行切換子頁面，寫法同vue.js -->
  <li><nuxt-link to='/parent/child'>child</nuxt-link></li>
  <li><nuxt-link to='/parent/child2'>child2</nuxt-link></li>
 </ul>
 <hr>
 <div class="box">
  <p>嵌套子頁面內(nèi)容區(qū)</p>
  <!-- <nuxt-child>標(biāo)簽在父頁面組件中相當(dāng)于是子頁面組件的占位符；嵌套中這個(gè)不可少 -->
  <nuxt-child keep-alive :foobar="123"></nuxt-child>
 </div>
 </div>
</template>
<script>
export default {
 
}
</script>
<style scoped>
.box{
 margin-top: 20px;
 padding: 20px;
 border: 2px solid pink;
 border-radius: 5px;
}
</style>

pages/parent/index.vue

<template>
 <div>
 <h3>嵌套子組件中的默認(rèn)頁面index.vue</h3>
 </div>
</template>
<script>
export default {
 
}
</script>
<style scoped>
 
</style>

pages/parent/child.vue

<template>
 <div>
 <h3>嵌套子組件中的頁面child</h3>
 <p>foobar：{{foobar}}</p>
 </div>
</template>
<script>
export default {
 props:['foobar']
}
</script>
<style scoped>
 
</style>

pages/parent/child2.vue

<template>
 <div>
 <h3>嵌套子組件中的頁面child2</h3>
 <p>foobar:{{foobar}}</p>
 </div>
</template>
<script>
export default {
 props: ['foobar']
}
</script>
<style scoped>
 
</style>

效果如下：

在Nuxt 中使用nuxt-child組件實(shí)現(xiàn)父頁面向子頁面?zhèn)髦?></p><p><img src=

// 定義了一個(gè)中間件， 如果用戶未登錄， 則跳轉(zhuǎn)登錄頁。
export default function ({
 store,
 redirect
}) {
 if (!store.state.user) {
 return redirect('/login')
 }
}

首先，需要知道，pages/index.vue這個(gè)文件必須有，這是給路由'/'，定義的頁面，但是我真正的首頁是在user/index.vue

pages/index.vue下

<template>
 <div >

 </div>
</template>

<script>
export default {
 created () {
 console.log(this.$router)
 this.$router.push('/login') // 頁面加載時(shí)跳轉(zhuǎn)
 }
}
</script>

意思是加載二級(jí)路由的pages/users.vue頁面

<template>
 <div >
 <el-container >
 <el-header class="theme-bg-color">
 <my-head />
 </el-header>
 <el-container >
 <my-side />
 <el-main>
  <NuxtChild :key="key"/>
 </el-main>
 </el-container>
 </el-container>
 </div>
</template>

<script>
import MySide from '~/components/MySide.vue'
import MyHead from '~/components/MyHead.vue'
export default {
 components: {
 MySide,
 MyHead
 },
 computed: {
 key() {
  return this.$route.name !== undefined&#63; this.$route.name +new Date(): this.$route +new Date()
 }
 }
}
</script>

注意，在pages/users/index.vue頁面中

export default {
 name: 'users'
}

其他頁面，比如pages/users/ditch.vue頁面中

export default {
 name: 'users-ditch'
}

一定要這樣去寫name，官網(wǎng)上也是這樣說明的。

總結(jié)，嵌套路由（二級(jí)路由寫法）

一，頁面有個(gè)user.vue,文件夾也要有個(gè)同名的user；

二，最好有index.vue頁面；

三，name格式。

看完上述內(nèi)容，你們對(duì)在Nuxt 中使用nuxt-child組件實(shí)現(xiàn)父頁面向子頁面?zhèn)髦涤羞M(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)
推薦閱讀：
  1. 如何實(shí)現(xiàn)Nuxt內(nèi)導(dǎo)航欄
  2. 詳解Nuxt.js 實(shí)戰(zhàn)集錦

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

AI
助
手