nuxt项目的文件夹目录

 

 

1.nuxt-link组件和router-link组件一样

2.pages文件夹中文件名就是路由路径名（无需配置路由路径），是页面组件。

  laouts文件夹,是公共的模板的内容组件，公共的组件<Nuxt />，必须要加

3.components是普通组件

4.自定义模板组件

在layouts-->新建search.vue, 自定义版本内容

<template>
  <div class="layout-search">
    <h1>layout search</h1>
    <nuxt />
    <footer>layout footer</footer>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped lang="css">
.layout-search {
  color: red;
}
</style>

在页面组件pages-->新建search.vue(文件名和路由路劲匹配)，用layout属性引入模板组件search.vue

<template>
  <div></div>
</template>

<script>
export default {
  layout: 'search',
  data() {
    return {}
  },
}
</script>

<style scoped lang="css"></style>

在浏览器输入路径。http://localhost:3333/search