# 2 02.动态页面标题实现

* #### 设置每个页面标题
* * 需要设置： meta 元素

```js
// src/router/index.js

// 2.定义一些路由
const routes = [
    { path: "/", component: Index, name: "index", meta: {'title': '首页'} },
    { path: "/about", component: About, name: "about", meta: {'title': '关于'}},
    { path: "/login", component: Login, name: "login", meta: {'title': '登录'}},
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: {'title': '404'} },
]


```

* #### 全局设置

```js
router.beforeEach(async (to, from, next) => {
    // 设置页面标题
    let title = (to.meta.title ? to.meta.title : "") + "~牛皮编程后台"
    document.title = title
})
```