zoukankan      html  css  js  c++  java
  • Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐)

    首先在路由文件index.js中给每个单页面路由添加title

    routes: [{
        path: '/',
        name: 'index',
        component: index,
        meta:{
            title:'首页标题'
        }
        },{
        path:'/detail',
        name:'detail',
        component:detail,
        meta:{
            title:'详情页标题'
        }
    }]

    第一种方法:引入vue-wechat-title插件

    1.下载安装插件依赖

    npm install vue-wechat-title --save-dev

    2.在入口文件main.js中引入并使用

    import VueWechatTitle from 'vue-wechat-title'
    Vue.use(VueWechatTitle)

    3.在app.vue中修改<router-view>标签

    <router-view v-wechat-title='$route.meta.title'></router-view>

    第二种方法:编程方式实现

    直接在入口文件main.js中添加如下代码即可

    router.beforeEach((to, from, next) => {
      /* 路由发生变化修改页面title */
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    })

    完啦,噜啦啦.......

    这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频
    那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
    扫码加群哦
    扫二维码加为好友就完事了!安排~

  • 相关阅读:
    Python学习笔记第二十三周(Flask架构)
    Python学习笔记第二十二周(前端知识点补充)
    Python学习笔记第二十一周
    Python学习笔记第二十周
    Python学习笔记第十九周
    Python学习笔记第十八周
    Python学习笔记第十七周
    Python学习笔记第十六周
    python完成九九乘法表
    python
  • 原文地址:https://www.cnblogs.com/twodog/p/11986183.html
Copyright © 2011-2022 走看看