最新文章:
- Git中tag和branch的区别
- 埃隆·马斯克的-五步工作法
- 特斯拉引荐码获取及使用
- 深入理解 require.context():简化前端模块导入的利器
- 2023年高考今天开始,一起来看看AI写的高考作文
您的位置:
富录-前端开发|web技术博客
>
JavaScript >
Vue项目中路由跳转时如何更改title的值
Vue项目中路由跳转时如何更改title的值
发布时间:2022年04月01日 评论数:抢沙发阅读数: 1898
不同页面有不同的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://www.arbays.com/post-179.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
本文地址: https://www.arbays.com/post-179.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
相关文章