動態設置html的title

BearyChat 發布于2019-08-23 12:32 / 1255人閱讀

摘要：使用前端框架做，竟然丟棄了很多和的東西了。。動態設置的方法使用的自定義指令很簡單設置路由不同的首頁個人中心完。

使用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的內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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