最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > Vue项目中路由跳转时如何更改title的值

Vue项目中路由跳转时如何更改title的值

发布时间:2022年04月01日 评论数:抢沙发阅读数: 235

    不同页面有不同的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技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论