快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

如何实现Nuxt内导航栏

这篇文章主要讲解了如何实现Nuxt内导航栏,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

10年积累的做网站、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有泽州免费网站建设让你可以放心的选择与我们合作。

方式一 | 通过嵌套路由实现

在pages页面根据nuxt的路由规则,建立页面

1. 创建文件目录及文件

如何实现Nuxt内导航栏

根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同

所以,我们的文件夹也为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配合子路由跳转

这里就拿官方demo改了一下,可以看到,切换路由的时候,只有子路由页面是变换的,父路由部分是没有变换的

如何实现Nuxt内导航栏 

方式二 | 创建公共组件实现

这个方法是需要用到vuex的,当然了,如果嫌麻烦,用storage也行

在components内创建公共组件

1.在pages文件夹创建页面,一个主页,一个用户页面,一个活动页面

如何实现Nuxt内导航栏

创建页面的过程就不一一细说了,具体就是文件夹下面一个index.vue,router就会读这个index为路由指定的页面

我们看下.nuxt文件夹下面的router.js页面

如何实现Nuxt内导航栏 

这就是建立好的路由

2. 创建公共组件

如何实现Nuxt内导航栏 

这里偷个懒,用的element的导航栏组件

3. 在所有路由页面导入创建的公共组件