如何实现Nuxt内导航栏

  介绍

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

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

<强> 1。创建文件目录及文件

如何实现Nuxt内导航栏”> </p> <p>根据规则,如果要创建子路,由子路由的文件夹名字,必须和父路由名字相同</p> <p>所以,我们的文件夹也为索引,索引文件夹需要一个默认的页面不然Nuxt的路由规则就不能正确匹配页面</p> <p>一级路由是根路由</p> <p>二级路由是索引,用户,默认进入指数路由</p> <p>下面是路由器页面自动生成的路由</p> <pre类= {   路径:“/?   组件:_93624e48,   孩子们:[{   路径:““,   组件:_7ba30c26,   名称:“index"   }, {   路径:“user",   组件:_6934afa7,   名称:“index-user"   })   }

<强> 2。html页面增加nutx-child配合子路由跳转

& lt; template>   & lt; div类=癱ontainer"祝辞   & lt; div>   & lt;标志/比;   & lt; h2类=皌itle"祝辞   nuxt-demo   & lt;/h2>//直接访问路由   & lt; !——& lt; nuxt-link=?users"在用户列表& lt;/nuxt-link>——比;//通过推动的方式直接访问路由路径   & lt; !——& lt; el-button @click=皉outer.push美元(& # 39;/用户# 39;)“在用户列表& lt;/el-button>——比;//通过推动的方式,同时用对象的方式访问路由   & lt; el-button @click=懊涝酚善鳌M贫?{name: & # 39;指数# 39;})“在首页& lt;/el-button>   & lt; el-button @click=懊涝酚善鳌M贫?{name: & # 39; index-user& # 39;})“在用户详情& lt;/el-button>   & lt;/div>//nuxt规定的子路由插槽   & lt; nuxt-child> & lt;/nuxt-child>   & lt;/div>   & lt;/template>

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

如何实现Nuxt内导航栏”>,</p> <p> </p> <p>这个方法是需要用到vuex的,当然了,如果嫌麻烦,用存储也行</p> <p>在组件内创建公共组件</p> <p> <强> 1。在页面文件夹创建页面,一个主页,一个用户页面,一个活动页面</强> </p> <p> <img src= & lt; template>   & lt; div id=皀av-wrapper"祝辞   & lt; el-menu: default-active=癮ctiveIndex"类=癳l-menu-demo"模式=癶orizontal"@select=癶andleSelect"比;   & lt; el-menu-item指数=?”;@click=懊涝酚善鳌M贫?{name: & # 39;指数# 39;})“在首页& lt;/el-menu-item>   & lt; el-menu-item指数=?”;@click=懊涝酚善鳌M贫?{name: & # 39;用户# 39;})“在用户页面& lt;/el-menu-item>   & lt; el-menu-item指数=?”;@click=懊涝酚善鳌M贫?{name: & # 39;活跃# 39;})“在活动页面& lt;/el-menu-item>   & lt;/el-menu>   & lt;/div>   & lt;/template>

<强> 3。在所有路由页面导入创建的公共组件

& lt; template>   & lt; div类=癱ontainer"祝辞   & lt; div>   & lt;标志/比;   & lt; h2类=皌itle"祝辞   nuxt-demo   & lt;/h2>   & lt;导航/比;   & lt;/div>   & lt;/div>   & lt;/template>      & lt; script>   进口商标& # 39;~/组件/Logo.vue& # 39;   从& # 39;进口导航~/组件/nav.vue& # 39;      出口默认{   组件:{   标志,   导航条   }   }   & lt;/script>      & lt; style>

这样就完成了第一步,我们看下预览

如何实现Nuxt内导航栏”> </p> <p>问题出现了,虽然我们的路由变换了,但是导航栏的状态确没有同步,因为路由跳转的时候,组件状态会刷新,所以这个时候,需要共享状态,所以,我这里用的是vuex <h2 class=如何实现Nuxt内导航栏