溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何實(shí)現(xiàn)Nuxt內(nèi)導(dǎo)航欄，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
方式一 | 通過嵌套路由實(shí)現(xiàn)
在pages頁面根據(jù)nuxt的路由規(guī)則，建立頁面
1. 創(chuàng)建文件目錄及文件
根據(jù)規(guī)則，如果要?jiǎng)?chuàng)建子路由，子路由的文件夾名字，必須和父路由名字相同
所以，我們的文件夾也為index，index文件夾需要一個(gè)默認(rèn)的頁面不然nuxt的路由規(guī)則就不能正確匹配頁面
一級路由是根路由
二級路由是index，user，默認(rèn)進(jìn)入index路由
下面是router頁面自動生成的路由
{
path: "/",
component: _93624e48,
children: [{
path: "",
component: _7ba30c26,
name: "index"
}, {
path: "user",
component: _6934afa7,
name: "index-user"
}]
}2. html頁面增加nutx-child配合子路由跳轉(zhuǎn)
<template>
<div class="container">
<div>
<logo />
<h2 class="title">
nuxt-demo
</h2>
// 直接訪問路由
<!-- <nuxt-link to="/users">用戶列表</nuxt-link> -->
// 通過push的方式直接訪問路由路徑
<!-- <el-button @click="$router.push('/users')">用戶列表</el-button> -->
// 通過push的方式，同時(shí)用對象的方式訪問路由
<el-button @click="$router.push({name: 'index'})">首頁</el-button>
<el-button @click="$router.push({name: 'index-user'})">用戶詳情</el-button>
</div>
// nuxt規(guī)定的子路由插槽
<nuxt-child></nuxt-child>
</div>
</template>這里就拿官方demo改了一下，可以看到，切換路由的時(shí)候，只有子路由頁面是變換的，父路由部分是沒有變換的
方式二 | 創(chuàng)建公共組件實(shí)現(xiàn)
這個(gè)方法是需要用到vuex的，當(dāng)然了，如果嫌麻煩，用storage也行
在components內(nèi)創(chuàng)建公共組件
1.在pages文件夾創(chuàng)建頁面，一個(gè)主頁，一個(gè)用戶頁面，一個(gè)活動頁面
創(chuàng)建頁面的過程就不一一細(xì)說了，具體就是文件夾下面一個(gè)index.vue，router就會讀這個(gè)index為路由指定的頁面
我們看下.nuxt文件夾下面的router.js頁面
這就是建立好的路由
2. 創(chuàng)建公共組件
這里偷個(gè)懶，用的element的導(dǎo)航欄組件
<template>
<div id="nav-wrapper">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" @click="$router.push({name: 'index'})">首頁</el-menu-item>
<el-menu-item index="3" @click="$router.push({name: 'users'})">用戶頁面</el-menu-item>
<el-menu-item index="4" @click="$router.push({name: 'active'})">活動頁面</el-menu-item>
</el-menu>
</div>
</template>3. 在所有路由頁面導(dǎo)入創(chuàng)建的公共組件
<template>
<div class="container">
<div>
<logo />
<h2 class="title">
nuxt-demo
</h2>
<navBar />
</div>
</div>
</template>
<script>
import Logo from '~/components/Logo.vue'
import navBar from '~/components/nav.vue'
export default {
components: {
Logo,
navBar
}
}
</script>
<style>這樣就完成了第一步，我們看下預(yù)覽
問題出現(xiàn)了，雖然我們的路由變換了，但是導(dǎo)航欄的狀態(tài)確沒有同步，因?yàn)槁酚商D(zhuǎn)的時(shí)候，組件狀態(tài)會刷新，所以這個(gè)時(shí)候，需要共享狀態(tài)，所以，我這里用的是vuex
4. 使用vuex同步導(dǎo)航欄狀態(tài)
直接在store文件夾內(nèi)進(jìn)行添加就行，nuxt里推薦的兩種vuex使用方法
第一種是普通創(chuàng)建
第二種是模塊化創(chuàng)建
這里我選的是第二種方式，我也建議使用這種，因?yàn)榉奖憔S護(hù)，各種狀態(tài)一目了然
我們看下目錄結(jié)構(gòu)，這里和在vue使用的vuex目錄是一樣的
這里就不一一詳細(xì)說明每個(gè)文件內(nèi)容了，本次重點(diǎn)是使用vuex來同步狀態(tài)
我們把狀態(tài)同步到vuex中，這樣每次頁面進(jìn)來的時(shí)候，直接讀取vuex中的數(shù)據(jù)，就可以同步導(dǎo)航欄狀態(tài)欄了
4.1 vuex使用報(bào)錯(cuò)
store/index.js should export a method that returns a Vuex
instance.vuex在nuxt中是需要導(dǎo)出一個(gè)store實(shí)例
我們這里需要改動一下store文件下的index頁面
我們繼續(xù)回到導(dǎo)航欄組件內(nèi)
<template>
<div id="nav-wrapper">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" @click="$router.push({name: 'index'})">首頁</el-menu-item>
<el-menu-item index="3" @click="$router.push({name: 'users'})">用戶頁面</el-menu-item>
<el-menu-item index="4" @click="$router.push({name: 'active'})">活動頁面</el-menu-item>
</el-menu>
</div>
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
export default{
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
computed: {
...mapGetters([
'barIndex'
])
},
methods: {
...mapMutations({
'change_index': 'CHANGE_INDEX'
}),
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex = key
// 每次切換導(dǎo)航欄，會把當(dāng)前狀態(tài)同步到vuex中
this.change_index(this.activeIndex)
}
},
created() {
if (this.barIndex) { // 判斷vuex內(nèi)是否有上一次存儲的數(shù)據(jù)，有就同步到當(dāng)前狀態(tài)
this.activeIndex = this.barIndex
}
console.log('vuex', this.activeIndex)
}
}
</script>這樣，我們就已經(jīng)可以同步導(dǎo)航欄狀態(tài)了
看完上述內(nèi)容，是不是對如何實(shí)現(xiàn)Nuxt內(nèi)導(dǎo)航欄有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼