详解Nuxt内导航栏的两种实现⽅式⽅式⼀ | 通过嵌套路由实现
在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)js导航栏下拉菜单
}
},
created() {
if (this.barIndex) { // 判断vuex内是否有上⼀次存储的数据，有就同步到当前状态
this.activeIndex = this.barIndex
}
console.log('vuex', this.activeIndex)
}
}
</script>
这样，我们就已经可以同步导航栏状态了
到此这篇关于详解Nuxt内导航栏的两种实现⽅式的⽂章就介绍到这了，更多相关Nuxt内导航栏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。