current position:Home>Vue project dynamically generates website titles according to routes

Vue project dynamically generates website titles according to routes

2022-05-15 05:23:50Upwind elegance

demand : According to the jump page , Dynamic display , The title we show on the website .

solve :

Method 1. Route interception through route guard . Dynamic display title

        In the configured routing file , Use the front guard of routing , Intercept the route , The following code :

  {
    path:'/unicorn_company/companyDetail',
    name:"UNICORN_COMPANY_DETAIL",
    component:()=>import('@/views/list/unicorn_company/unicorn_company_detail/index.vue'),
    meta:' Business details '
  },
]
const router = new VueRouter({
  mode: 'hash',
  base: '/lsxcx/',
  routes
})

router.beforeEach((to, from, next) => { 
  //	to:  Target route 
  //	from:  Current route   
  // next()  Jump    Be sure to call 
 if (to.query.titleName==' Technological Development ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' Talent development ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' The economic development ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' Industrial Development ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' New research institutions ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' Innovation and entrepreneurship carrier ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' High index ') {
    document.title = to.query.titleName
  }
  else if (to.query.titleName==' Comparison of districts and counties ') {
    document.title = to.query.titleName
  }
  else  if (to.meta!={}) {
    document.title = to.meta
  }else {
    document.title = ' Lishui Kechuang forest '
  }
  next()// release 
})

Be careful : In the code above , There are some routes , This is the case when multiple components jump to the same route , This is through query or params Carry information . But when making guard judgment , Pay attention to the order of judgment , You should follow the order of the above code , First judge whether there is meta Of , In judging meta Of .

Method 2: In each component , Set separately title, Pictured : 

  It is not recommended to use , too troublesome

copyright notice
author[Upwind elegance],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/131/202205111220116816.html

Random recommended