十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了如何实现Nuxt内导航栏,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
10年积累的做网站、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有泽州免费网站建设让你可以放心的选择与我们合作。
方式一 | 通过嵌套路由实现
在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配合子路由跳转
// nuxt规定的子路由插槽nuxt-demo
// 直接访问路由 // 通过push的方式直接访问路由路径 // 通过push的方式,同时用对象的方式访问路由首页 用户详情
这里就拿官方demo改了一下,可以看到,切换路由的时候,只有子路由页面是变换的,父路由部分是没有变换的
方式二 | 创建公共组件实现
这个方法是需要用到vuex的,当然了,如果嫌麻烦,用storage也行
在components内创建公共组件
1.在pages文件夹创建页面,一个主页,一个用户页面,一个活动页面
创建页面的过程就不一一细说了,具体就是文件夹下面一个index.vue,router就会读这个index为路由指定的页面
我们看下.nuxt文件夹下面的router.js页面
这就是建立好的路由
2. 创建公共组件
这里偷个懒,用的element的导航栏组件
3. 在所有路由页面导入创建的公共组件
nuxt-demo
这样就完成了第一步,我们看下预览
问题出现了,虽然我们的路由变换了,但是导航栏的状态确没有同步,因为路由跳转的时候,组件状态会刷新,所以这个时候,需要共享状态,所以,我这里用的是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页面
我们继续回到导航栏组件内
这样,我们就已经可以同步导航栏状态了
看完上述内容,是不是对如何实现Nuxt内导航栏有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。