NuxtJS和如何设置默认页面布局?

时间:2019-02-03 18:16:38

标签: javascript vue.js vue-router nuxt.js

所以我才开始使用NuxtJS,到目前为止我很喜欢它。我现在试图弄清楚如何为页面设置默认页面布局。在NuxtJS中,路由是在页面文件夹中设置的,因此,如果我想将目标定位为带有标签的页面,则类似test.com/about。我将在名为'_slug'的页面文件夹中创建一个文件夹,并在该_slug文件夹中添加一个index.vue文件。然后,在该文件中,我将设置我想要的布局,以用于基本URL后面只有一段标记的页面。

我现在所处的页面的URL看起来像test.com/about/history。我知道我可以在pages文件夹中添加一个名为“ about”的文件夹,并在名为“ _slug”的文件夹中添加一个带有index.vue文件的文件夹,以定位该URL路径。

但是我想要的是带有test.com/about/(slug-name-here)的页面,使用与page-> _ slug-> index.vue相同的页面布局,而不必复制代码在该文件中,然后在page-> about-> _ slug-> index.vue文件中再次使用它。

所以我想弄清楚的是,是否有一种方法可以告诉NuxtJS为每个页面使用page-> _ slug-> index.vue,除非它是通过创建所需的文件夹结构在pages文件夹中指定的。

1 个答案:

答案 0 :(得分:0)

您可以通过点击extendedRoutes文件中router实例的nuxt.config.js实例的export default { router: { extendRoutes (routes, resolve) { routes.push({ name: 'custom', path: '*', component: resolve(__dirname, 'pages/_slug/index.vue') }) } } } 方法来控制路由:

/jetty-logging.properties

然后不再创建页面,所有路由都将转到该特定的vue文件。