如何實現(xiàn)Nuxt內導航欄

這篇文章主要講解了如何實現(xiàn)Nuxt內導航欄，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

10年積累的做網站、成都做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先建設網站后付款的網站建設流程，更有澤州免費網站建設讓你可以放心的選擇與我們合作。

方式一 | 通過嵌套路由實現(xiàn)

在pages頁面根據nuxt的路由規(guī)則，建立頁面

1. 創(chuàng)建文件目錄及文件

如何實現(xiàn)Nuxt內導航欄

根據規(guī)則，如果要創(chuàng)建子路由，子路由的文件夾名字，必須和父路由名字相同

所以，我們的文件夾也為index，index文件夾需要一個默認的頁面不然nuxt的路由規(guī)則就不能正確匹配頁面

一級路由是根路由

二級路由是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 />
   <h2 class="title">
    nuxt-demo
   </h2>
   // 直接訪問路由
   <!-- <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規(guī)定的子路由插槽
  <nuxt-child></nuxt-child>
 </div>
</template>

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

如何實現(xiàn)Nuxt內導航欄

方式二 | 創(chuàng)建公共組件實現(xiàn)

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

在components內創(chuàng)建公共組件

1.在pages文件夾創(chuàng)建頁面，一個主頁，一個用戶頁面，一個活動頁面

如何實現(xiàn)Nuxt內導航欄

創(chuàng)建頁面的過程就不一一細說了，具體就是文件夾下面一個index.vue，router就會讀這個index為路由指定的頁面

我們看下.nuxt文件夾下面的router.js頁面

如何實現(xiàn)Nuxt內導航欄

這就是建立好的路由

2. 創(chuàng)建公共組件

如何實現(xiàn)Nuxt內導航欄

這里偷個懶，用的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. 在所有路由頁面導入創(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>

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

如何實現(xiàn)Nuxt內導航欄

問題出現(xiàn)了，雖然我們的路由變換了，但是導航欄的狀態(tài)確沒有同步，因為路由跳轉的時候，組件狀態(tài)會刷新，所以這個時候，需要共享狀態(tài)，所以，我這里用的是vuex

4. 使用vuex同步導航欄狀態(tài)

直接在store文件夾內進行添加就行，nuxt里推薦的兩種vuex使用方法

第一種是普通創(chuàng)建

如何實現(xiàn)Nuxt內導航欄

第二種是模塊化創(chuàng)建

如何實現(xiàn)Nuxt內導航欄

這里我選的是第二種方式，我也建議使用這種，因為方便維護，各種狀態(tài)一目了然

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

如何實現(xiàn)Nuxt內導航欄

這里就不一一詳細說明每個文件內容了，本次重點是使用vuex來同步狀態(tài)

我們把狀態(tài)同步到vuex中，這樣每次頁面進來的時候，直接讀取vuex中的數據，就可以同步導航欄狀態(tài)欄了

4.1 vuex使用報錯

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

instance.vuex在nuxt中是需要導出一個store實例

我們這里需要改動一下store文件下的index頁面

如何實現(xiàn)Nuxt內導航欄

我們繼續(xù)回到導航欄組件內

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

這樣，我們就已經可以同步導航欄狀態(tài)了

如何實現(xiàn)Nuxt內導航欄

看完上述內容，是不是對如何實現(xiàn)Nuxt內導航欄有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網頁名稱：如何實現(xiàn)Nuxt內導航欄
網頁路徑：http://jinyejixie.com/article20/gpegco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站建設、營銷型網站建設、面包屑導航、全網營銷推廣、網頁設計公司、定制開發(fā)

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何實現(xiàn)Nuxt內導航欄