nuxt初学——全部布局与自定义路由

公司要求项目要对SEO友好，但是没了大神的加持，虽然不想学习了，也得硬着头皮来，看了下nuxt,还好比较适合我这种只会vue也学不太进的。
开始学习创建项目之后就遇到项目目录结构比文档上的少，虽然懵逼，硬着头皮自己创建了，没想到没问题。

1. 全局头部布局
首先就来一个全局头部布局的问题，毕竟都想一次注册，终身使用。原来nuxt是提供了的，我的创建项目的时候没有，所以自己创建了一个 layouts 文件夹，下面新增一个 default.vue 文件，默认的布局就是layouts -> default.vue ，不过默认的里面只有一个Nuxt标签，这相当于RouterView标签。所以在这里面更改就可以了。
我是在components中新建了一个布局文件夹，专门用于存放布局组件，然后引入到 default.vue 中去。这样默认的头部就生成了。以后页面路由到哪里都会带着它。
当然也有的时候会要换布局，那可以在layouts下面新增文件例如 CustomLayout.vue 写好其他的布局，在nuxt中layouts下的文件都是自动注册的。所以我们只需要在需要的地方引入layout:'CustomLayout'就可以了。

2. 自定义路由
虽然nuxt是根据pages的文件结构自动生成路由的，但是项目复杂了这谁来把路由全路径写出来啊，累死。在写vue-cli项目习惯了使用路由的名称来跳转，当然也想在这里面也是一样的了。nuxt也提供了自定义路由配置，同样，在 nuxt.config.js 中配置

export default {
	router: {
		extendRoutes(routes, resolve) {
			routes.push({
				path: '/home/test',
				name: 'Test',
				component: {
					default: resolve('@/pages/Test'),
				}
			}, {}, ...)
		}
	}
}

这样就可以将自定义的路由全部导入进去，而不必遵守nuxt的命名规范（其实我可能就是不想去费头脑想路由嵌套深了的path以及文件该起啥名这件事），直接在页面中使用this.$router.push({ name: ‘Test’ })就可以访问到pages下面的Test下的index.vue文件，与自己平时写vue路由的习惯一致，nice!