Vue项目中路由跳转时如何更改title的值-富录

Vue项目中路由跳转时如何更改title的值

DGF

2022-04-01 / 0 评论 / 0 点赞 / 160 阅读 / 444 字

12/05

不同页面有不同的 title，那么如何动态改变 title 的值呢？
涉及到两个文件的修改：src/main.js 和 src/router/index.js。

1. 在 `main.js` 文件中注册一个全局的前置守卫：

router.beforeEach(function (to, from, next) {
  if (to.meta.title) {
    document.title = to.meta.title;
    // 确保调用 next()，否则不会跳转
  } else {
    // 如果没有，也可以用个默认的
    document.title = "默认名称";
  }
  next();
});

router.beforeEach 的参数：

to: 要跳转的目标路由对象
from: 当前要离开的路由对象
next: 是个函数，确保要调用，否则不会跳转

2. 在 `index.js` 文件中增加 `meta` 属性：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    // 要增加的 meta 属性
    meta: {
      title: '首页'
    }
  },
  {
    path: '/ClassifyView',
    name: 'ClassifyView',
    component: () => import('../views/ClassifyView.vue'),
    // 要增加的 meta 属性
    meta: {
      title: '商品分类'
    }
  }
];

目录CONTENT

Vue项目中路由跳转时如何更改title的值

1. 在 `main.js` 文件中注册一个全局的前置守卫：

2. 在 `index.js` 文件中增加 `meta` 属性：

评论区