如何实现Nuxt内导航栏

这篇文章主要讲解了如何实现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配合子路由跳转

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

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

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

在components内创建公共组件

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

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

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

这就是建立好的路由

2. 创建公共组件

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

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