VueRouter改变页面标题

VueRouter改变页面标题

方法1：

const router = new Router({
  mode: "history",
  base: "/",
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
      meta: { title: "首页" }
    },
    {
      path: "/login",
      name: "login",
      component: UserLogin,
      meta: { title: "登录" }
    },
    {
      path: "/tags",
      name: "tags",
      component: Tags,
      meta: { title: "标签页" }
    }
  ]
});

router.afterEach(to => {
  document.title = to.meta.title || "site title"
});

方法2：

// root component
export default {
  name: "app",
  watch: {
    $route(to, from) {
        document.title = to.meta.title || "site title";
    },
  }
};