Vue Nuxt 动态设置页面title

产品需求

优化页面顶部title，之前所有的页面都是项目名称“旅业学院”，实现每个页面的title格式为“菜单名称-项目名称”

实现方法

1.在页面使用的布局文件的head中修改title

nuxt中页面都会使用layout中声明的布局 如首页中

找到该布局文件，在head中设置titile即可

2.如果同一个布局文件被多个页面引用，可以通过在页面中使用asyncData方法为每一个页面设置title

3.通过在页面中使用head()设置title实现

这种方法适应的场景：

1). 详情页，想把详情的名称添加到title中，名称是动态获取的，到那时asyncData中不能使用this获取data中设置的数据

2). 通过菜单切换路由时，子页面不会每次都重新构建，asyncData只会在第一次触发，title不会按菜单切换更改，在每个子页面使用head（）设置可以实现

本文使用 mdnice 排版