如何在nuxtjs中实现绑定到路由的侧边栏答案

【问题标题】：How to implement a sidebar that is bound to the route in nuxtjs如何在nuxtjs中实现绑定到路由的侧边栏
【发布时间】：2019-04-04 17:01:05
【问题描述】：

所以我像这样构建了我的 pages 文件夹

pages/
--index/
----page1/
------_slug.vue
----page2/
------_slug.vue
----page1.vue // contains different content
----page2.vue // contains different content
--index.vue

这样可以像访问路由一样

/index
/index/page1
/index/page2
/index/page1/some-slug-here
/index/page2/some-slug-here

现在，我想要实现的是，当我访问路由 /index/page2/some-slug-here 时。它将基于该路由参数显示侧边栏组件。因此，为了展示一些视觉效果，请查看随附的图片。

因为 nuxt 似乎不支持命名视图路由。还有其他方法可以实现我想要的吗？

谢谢。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

Nuxt.js 确实支持命名视图。它们在documentation 中被引用为layouts，正是为了这个目的。

可以在layouts文件夹中创建多个layouts，并为每个页面指定如下：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'sidebar'
    // page component definitions
  }
</script>

【讨论】：