想要网站每个页面的描述更加准确，让搜索引擎更好的进行seo，网站更好的被收录。需要对每个页面设置单独的标题，关键词和描述文字。在vue单页面项目中，我们可以通过在路由表中的路由对象中添加属性，并通过router.aftereach()或者router.beforeeach()钩子函数来实现路由变化的监听，每次路由变化后，将新的title，description和keywords更新到当前的页面。

step1

在index.html的head中添加两个meta标签。 

1
2
<meta data-n-head="1" data-hid="description" name="description" content="">
 <meta data-n-head="1" data-hid="keywords" name="keywords" content="">

step2

在router里面的路由index.js文件中，添加每个页面的meta内容。例如： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      meta: {
        title: '首页title内容',
        content:{
          keywords:'这里是keywords,用逗号间隔',
          description:'这里是description',
        },
      
      }
    }

step3

在main.js文件中，使用钩子函数来监听路由变化，将数据更新。 

1
2
3
4
5
6
7
8
9
10
11
12
13
 router.afterEach((to,from)=>{
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if(to.meta.content){
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
    document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
})

可以通过浏览器中的开发者工具里面的查看器之类的工具，来查看页面的html是否包含这些数据。