方式一 | 通過巢狀路由實現

在pages頁面根據nuxt的路由規則，建立頁面

1. 建立檔案目錄及檔案

根據規則，如果要建立子路由，子路由的資料夾名字，必須和父路由名字相同

所以，我們的資料夾也為index，index資料夾需要一個預設的頁面不然nuxt的路由規則就不能正確匹配頁面

一級路由是根路由

二級路由是index，user，預設進入index路由

下面是router頁面自動生成的路由

{
  path: "/",component: _93624e48,children: [{
   path: "",component: _7ba30c26,name: "index"
  },{
   path: "user",component: _6934afa7,name: "index-user"
  }]
 }

2. html頁面增加nutx-child配合子路由跳轉

<template>
 <div class="container">
  <div>
   <logo />
   <h1 class="title">
    nuxt-demo
   </h1>
   // 直接訪問路由
   <!-- <nuxt-link to="/users">使用者列表</nuxt-link> -->
   // 通過push的方式直接訪問路由路徑
   <!-- <el-button @click="$router.push('/users')">使用者列表</el-button> -->
   // 通過push的方式，同時用物件的方式訪問路由
   <el-button @click="$router.push({name: 'index'})">首頁</el-button>
   <el-button @click="$router.push({name: 'index-user'})">使用者詳情</el-button>
  </div>
  // nuxt規定的子路由插槽
  <nuxt-child></nuxt-child>
 </div>
</template>

這裡就拿官方demo改了一下，可以看到，切換路由的時候，只有子路由頁面是變換的，父路由部分是沒有變換的

方式二 | 建立公共元件實現

這個方法是需要用到vuex的，當然了，如果嫌麻煩，用storage也行

在components內建立公共元件

1.在pages資料夾建立頁面，一個主頁，一個使用者頁面，一個活動頁面

建立頁面的過程就不一一細說了，具體就是資料夾下面一個index.vue，router就會讀這個index為路由指定的頁面

我們看下.nuxt資料夾下面的router.js頁面

這就是建立好的路由

2. 建立公共元件

這裡偷個懶，用的element的導航欄元件

<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. 在所有路由頁面匯入建立的公共元件

<template>
 <div class="container">
  <div>
   <logo />
   <h1 class="title">
    nuxt-demo
   </h1>
   <navBar />
  </div>
 </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import navBar from '~/components/nav.vue'

export default {
 components: {
  Logo,navBar
 }
}
</script>

<style>

這樣就完成了第一步，我們看下預覽

問題出現了，雖然我們的路由變換了，但是導航欄的狀態確沒有同步，因為路由跳轉的時候，元件狀態會重新整理，所以這個時候，需要共享狀態，所以，我這裡用的是vuex

4. 使用vuex同步導航欄狀態

直接在store資料夾內進行新增就行，nuxt裡推薦的兩種vuex使用方法

第一種是普通建立

第二種是模組化建立

這裡我選的是第二種方式，我也建議使用這種，因為方便維護，各種狀態一目瞭然

我們看下目錄結構，這裡和在vue使用的vuex目錄是一樣的

這裡就不一一詳細說明每個檔案內容了，本次重點是使用vuex來同步狀態

我們把狀態同步到vuex中，這樣每次頁面進來的時候，直接讀取vuex中的資料，就可以同步導航欄狀態列了

4.1 vuex使用報錯

store/index.js should export a method that returns a Vuex

instance.vuex在nuxt中是需要匯出一個store例項

我們這裡需要改動一下store檔案下的index頁面

我們繼續回到導航欄元件內

<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
    // 每次切換導航欄，會把當前狀態同步到vuex中
    this.change_index(this.activeIndex)
   }
  },created() {
   if (this.barIndex) { // 判斷vuex內是否有上一次儲存的資料，有就同步到當前狀態
    this.activeIndex = this.barIndex
   }
   console.log('vuex',this.activeIndex)
  }
 }
</script>

這樣，我們就已經可以同步導航欄狀態了

到此這篇關於詳解Nuxt內導航欄的兩種實現方式的文章就介紹到這了,更多相關Nuxt內導航欄內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！