通过路由meta给每个路由页面添加title

做了个移动端商城的单页面应用，进入页面的时候，网站的title要显示当前页面的名称，

页面效果参考：blog.csdn.net/qq_36410795…

// router.js

import Vue from "vue";
import Router from "vue-router";

const router = new Router({
	routers: [
		{
			path: '/',
			name: 'home',
			component: => import("@/pages/home.vue"),
			meta: {
				title: '商城首页',		// 配置页面标题
        		showNavbar: false,     // 是否显示navbar，false不显示，不设定即显示
			}
		},
		{
			path: '/goods',
			name: 'goods',
			component: => import("@/pages/goods.vue"),
			meta: {
				title: ''
			}
		},
        {
			path: '/checkout',
			name: 'checkout',
			component: => import("@/pages/checkout.vue"),
			meta: {
				title: '确定订单'
			}
		}
	]
})

// 路由跳转的时候，改变页面的title值
router.beforeEach((to, from, next) => {
    if(to.meta.title){  // 当title有值的时候，进行赋值动作，title没值，则不进行赋值
        document.title = to.meta.title
    }
})

export default router

• 当进入商品页面的时候，想显示商品的名称，因为每个商品的名称不一样，且在进入商品组件页面的时候才取得商品信息，所以没法在路由那统一配置，这时商品页的title赋值的动作应写到组件中。

<!-- app.vue -->

<template>
    <div id="app">
        <!-- 头部导航 -->
        <van-nav-bar
            :title="$route.meta.title"
            v-show="$route.meta.showNavbar !== false"
        />
        <router-view />
	</div>
</template>

// goods.vue

created(){
    this.$route.meta.title = this.goods.name;   // 改变路由meta，让navbar的title显示商品名称
	document.title = this.goods.name  // 页面title也变更名称
}

• 通过此方法确实起到了进入路由的时候，标题显示对应页面信息名称，但在浏览器back返回首页时显示了home组件的title，再次进入goods组件时，会显示上一次赋值的this.$route.meta.title称，而后再显示当前商品名称。

  问题原因是因为进入组件，页面created时，$router.meta被修改后已被赋值，因为meta有值，且值的内容是上一次商品的名称，则触发了beforeEach的document.title赋值动作，然后进入页面时再次执行了created的重复赋值动作。

  解决方法：

  在组件中触发路由离开时，将meta值置空

  // goods.vue
  
  beforeRouterLeave((to, from, next)=> {
      from.meta.title = ''; // 将created的赋值动作置空
      next()
  })
  

  这时候即可确保good路由的meta依然为空，不会触发到beforeEach，真正改变document.title只在created中执行。