动态修改Vue项目中的页面title

ゝ一世哀愁。 2023-01-21 05:22 260阅读 0赞

一、在main.js中：

  1. // 设置浏览器标题
  2. Vue.directive('title', {
  3.   inserted: function (el, binding) {
  4.     document.title = el.dataset.title
  5.   }
  6. })

二、在某个页面最外层的div上：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70

效果：

20210514163949159.png

简单的方法：

直接在页面里写

  1. document.title="溯源平台"

或者通过路由

  1. const routes = [
  2.   {
  3.     path: '/apply',
  4.     component: () => import(/* webpackChunkName: "login" */ '@/views/apply.vue'),
  5.     meta: {title:"助销员申请"}
  6.   },
  8. ]

main.js

  1. router.beforeEach((to, from, next)=>{
  2.   if(to.meta.title){
  3.     document.title = to.meta.title
  4.   }
  5.   next()
  6. })

发表评论

表情：
评论列表 （有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读