这篇文章主要讲解了如何实现Nuxt内导航栏,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
在页面页面根据Nuxt的路由规则,建立页面
<强> 1。创建文件目录及文件强>
{ 路径:“/? 组件:_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>
这里就拿官方演示改了一下,可以看的到,切换路由的时候,只有子路由页面是变换的,父路由部分是没有变换的
& 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>
这样就完成了第一步,我们看下预览