vue 实现动态修改title

258 阅读1分钟

一 在router的index.js的路由中加上参数

{ path: '/login', component: Login, meta: { title: '登录' } }

注 : 这种跳转只能满足局部要求,比如路由已经设置好了,但是我们经常遇到的是动态设置详情页面的路由(比如列表跳转详情页面,如下)

二 通过路由钩子实现title动态修改

1 从列表页跳转到详情页面时,将需要动态设置的值通过路由跳转带来(通过query或者params方式自选,根据需求)

如下 ** 《router-link :to="{name:'productDetail',query:{id:item.id},params:{title:item.title,title:item.title}}"></router-link》 **

注 我的title不想显示出来,采用params方式

2 在productDetail页面中加入路由钩子

beforeRouteEnter(to, from, next){ document.title =to.params.name+'-动态设置title'; ('meta[name="keywords"]').attr('content','to.params.name+'礼品产品,可定制'); 
   //注:动态设置keywords中content值('meta[name="description"]').attr('content',to.params.name+'定制,品牌形象,企业礼品,); //注:动态设置description中content值

next();

},