Vue-router Dynamic Settings page title

Since the application developed with the Vue Framework is a SPA (single page application), in the form of routing, there is no so-called page, so you want to make the title of the page changes with the route, you can use Document.title =xxx to change the page title.

But in the iOS app this doesn't work because the page title is loaded only once in iOS WebView, and dynamic changes are not valid.

The solution is to silently load an empty IFRAME after the routing switch is complete dynamically set the title

Defining the Setmetatitle () function in Util.js

function Setmetatitle (title) {
  Document.title = title Let
  mobile = Navigator.userAgent.toLowerCase ()
  if (/ Iphone|ipad|ipod/.test (MOBILE) {let
    iframe = document.createelement (' iframe ')
    iframe.style.visibility = ' Hidden '
    //Replace the Favicon path with a station label or any small image that exists
    iframe.setattribute (' src ', ' static/img/blank.png ')
    let Iframecallback = function () {
      setTimeout (function () {
        iframe.removeeventlistener (' Load ', iframecallback)
        document.body.removeChild (iframe)
      }, 0)
    }
    Iframe.addeventlistener (' Load ', iframecallback)
    document.body.appendChild (iframe)
  }
}


Export {
  Setmetatitle
}

Call the Setmetatitle () function in the application portal Main.js

Import vue from ' Vue '
import vuerouter from ' vue-router '
import vueresource from ' Vue-resource '
import Routes from "./router/router.js '
import Filter from"./utils/filter.js '
import {setmetatitle} from './utils/ Util.js '
import App from './app.vue '

vue.use (vuerouter)
vue.use (Vueresource)

vue.directive (' Title ', {
  inserted:function (el, binding) {
    setmetatitle (binding.value)
  }
})

Object.keys ( Filter). ForEach (function (k) {
  vue.filter (k, filter[k]);
});

Const ROUTER = new Vuerouter ({
  routes:routes
})

new Vue ({
  router:router,
  render:h = h ( APP)
}). $mount (' #app ')

Vue file Call

<H2 v-title= "' page title '" > set page title by instruction