vue修改页面title

最新推荐文章于 2025-09-07 19:42:02 发布

原创最新推荐文章于 2025-09-07 19:42:02 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

博客介绍了Vue相关配置，包括router配置中设置meta里的页面title，还提及main.js入口文件，但未详细说明效果。主要围绕Vue开发中的配置操作展开。

router配置：配置meta:{title:‘页面title’}

export default {
    
    routes:[
        //首页
        { path: '/', redirect: '/index',meta: {
            title: '首页',
            requireAuth:true
          }}
    ]
    
}

main.js入口文件：

//导入router包
import VueRouter from 'vue-router';
//导入路由配置
import RouterConfig from '../roter/index.js';

Vue.use(VueRouter);

 /* 路由发生变化修改页面title */
const rote = new VueRouter(RouterConfig);
rote.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

效果：

在这里插入图片描述