vuejs项目:路由跳转时更改页面title - 代码篇

文章目录

  • (含效果图、演示代码)vue路由跳转不同页面的时候,自动更改页面title
      • 一、效果图演示:
      • 二、示例 · 重要代码:
      • 三、设置总结


(含效果图、演示代码)vue路由跳转不同页面的时候,自动更改页面title


一、效果图演示:

vuejs项目:路由跳转时更改页面title - 代码篇_第1张图片


二、示例 · 重要代码:


文件名:main.js

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


文件名:router/index.js

routes: [
    {
      path: '/',
      name: 'index',
      component: Index,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录页'
      }
    },    
    {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {
        title: '注册页'
      }
    },    
    { // 人才服务协议
      path: '/agreement',
      name: 'agreement',
      component: Agreement,
      meta: {
        title: '人才服务协议'
      }
    },    
    { // 隐私条款
      path: '/secretRules',
      name: 'secretRules',
      component: SecretRules,
      meta: {
        title: '隐私条款'
      }
    },   


··· 等等  ···
  ]
})


三、设置总结

  • router文件夹下的index.js文件中给每个path添加meta:{ }
    (具体参考下文: 代码片段B

  • js入口文件main.js中添加代码(具体参考下文: 代码片段A):

***类比注册页:

  1. 先添加代码片段A

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

  1. 再添加设置代码片段B
     meta: {
        title: '注册页'
      }

以上就是关于“ vuejs项目:路由跳转时更改页面title - 代码篇 ” 的全部内容。

你可能感兴趣的:(Vue.js)