最新文章:
- 你不曾察觉的隐患:危险的 target="_blank" 与 “opener”
- 如何在https页面中引入 http 资源
- 如何在Mac上安装 ADB (Android Debug Bridge)及连接Android设备
- 【2018年云栖大会】当小程序遇上AR,黑科技营销还能这样玩
- 十个JavaScript 中学习的重点
您的位置:
富录-前端开发|web技术博客
>
未分类 >
Vue项目中路由跳转时如何更改title的值
Vue项目中路由跳转时如何更改title的值
发布时间:2022年04月01日 评论数:抢沙发阅读数: 2351
不同页面有不同的title,那么如何动态改变title的值呢?
涉及到两个页面的修改,src/main.js文件和src/router/index.js文件
1.在main.js文件中注册一个全局的前置守卫:
router.beforeEach(function (to, from, next) { if (to.meta.title) { document.title = to.meta.title //确保要调用,否则不跳转 //next() } else { //如果没有,也可以用个默认的 document.title = "默认名称" } next() })
router.beforeEach参数:
to:要跳转的目标路由对象
from:当前要离开的路由对象
next:是个函数,确保要调用,否则不会跳转
2.在index.js文件中增加meta属性
const routes = [ { path: '/', name: 'home', component: HomeView, //下面是要增加的 meta: { title: '首页' } }, { path: '/ClassifyView', name: 'ClassifyView', component: () => import( '../views/ClassifyView.vue'), //下面是要增加的 meta: { title: '商品分类' } } ]
本文作者:DGF
文章标题:
Vue项目中路由跳转时如何更改title的值
本文地址: https://arbays.com/post-179.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
本文地址: https://arbays.com/post-179.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
相关文章