vue 设置动态标题

在 router/index.js 文件中设置 meta:{title:'标题'} 和 router.beforeEach,即可实现功能, 代码如下:

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "login",
    component: ()=> import("@/views/LoginView") ,
    meta:{title:'登录',keepAlive:false}
  },
  {
    path: "/home",
    name: "home",
    component: ()=> import("@/views/HomeView"),
    meta:{title:'首页',keepAlive:false}
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
router.beforeEach((to,from ,next)=>{
  if(to.meta.title) {
    document.title=to.meta.title;
  }else {
    document.title='vue-demo';
  }
  next()
})

export default router;
posted @ 2022-04-20 08:55  Earen  阅读(245)  评论(0编辑  收藏  举报