动态设置html的title

BearyChat 发布于2019-08-23 12:32 / 1236人阅读

摘要：使用前端框架做，竟然丢弃了很多和的东西了。。动态设置的方法使用的自定义指令很简单设置路由不同的首页个人中心完。

使用vue前端框架做，竟然丢弃了很多javascript和html的东西了。。
动态设置title的方法：

1.使用vue的自定义指令

{{htmltitle}}
...
directives: {
  title: {
      inserted: function (el, binding) {
          document.title = el.innerText
          el.remove()
      }
  }
}

2.很简单

// 设置html title
document.title = sessionStorage.getItem("title")

3.router路由不同的title

...
routes: [
        {
            path: "/index",
            name: "index",
            component: index,
            meta:{
                title:"首页"
            }
        },
        {
            path: "/user",
            name: "user",
            component: user,
            meta:{
                title:"个人中心"
            }
        }
    ]
...
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

2018-10-25
完。

云服务器 GPU云服务器设置title 动态html的实现设置html的宽度设置html的内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98683.html

js动态修改浏览器title

摘要：举个栗子恢复正常了快回来页面崩溃了我们在浏览器取得了焦点和失去焦点的时候改变的值，可以发现切换浏览器选项卡的时候，发生了改变。 title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName(title)[0]来获取网页的title标签,但却无法用document.getElementsByTagName(title)[0].inne...

LdhAndroid 2019-08-21 17:44 评论0 收藏0
Angular 2+ 监听路由变化动态设置页面标题

摘要：今天我们实现单页面应用中路由变化设置页面标题，来优化用户的用户体验。在中，解决起来要比容易得多，我们可以通过注入一个，在路由变化事件中使用提供的来动态更新页面标题。现在很多web网站都采用了SPA单页应用，单页面有很多优点：用户体验好、应用响应快、对服务器压力小等等。同时也有一些缺点：首次加载资源太多，不利于SEO，前进、后退、地址栏需要手动管理。今天我们实现Angular单页面应...

entner 2019-08-20 17:37 评论0 收藏0
React项目动态设置title标题

摘要：在搭建的项目中页面的是直接写在入口中，当路由在切换不用页面时，是不会动态变化的。这是自定义的标题在路由的获取到自定义的设置页面标题即可。在React搭建的SPA项目中页面的title是直接写在入口index.html中，当路由在切换不用页面时，title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢？1.在定义路由时增加title属性。 { p...

sherlock221 2019-08-23 12:07 评论0 收藏0
[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配

摘要：还记得我们上文中的文件吗那里面的标签还是写死的文件，那么怎么把他们变成动态的文件，这个动态生成的文件会动态引入我们打包后生成的文件呢，我们可以使用插件，首先安装这个插件，好的，接下来就开始用这个插件了官方参考文档插件通用用法还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html...

qpal 2019-08-22 11:08 评论0 收藏0