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

标签：rip   pre   pat   new   end   main   rom   cti   index   

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。

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

标签：rip   pre   pat   new   end   main   rom   cti   index   

原文地址：https://www.cnblogs.com/tanyiqu/p/14396921.html