Vue路由跳转时修改页面标题

2024-09-03 04:13:21

1 在main.js中添加如下代码

import Vue from 'vue'

import App from './App.vue'

import router from './router'

// 路由发生变化修改页面title

router.beforeEach((to, from, next) => {

  if (to.meta.title) {

    document.title = to.meta.title;

  }

  next();

})

Vue.config.productionTip = false

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

2 在路由index.js中添加如下代码

const routes = [{

  path: '/login',

  name: 'Login',

  component: Login,

  meta: {

    title: '登录'

  }

}]

之后再切换路由时会自动修改title。

最新文章

热门文章