vue-router动态设置页面title的实例讲解

由于用Vue框架开发的应用是SPA（单页面应用），采用的是路由的形式，没有所谓的页面，所以想让网页的标题随着路由的改变而改变，可以使用document.title = ×××来改变网页标题。

但是在IOS APP里这种方式不起作用，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。

解决方案是在路由切换完成之后，静默加载一个空的iframe动态设置title

util.js中定义setMetaTitle()函数

function setMetaTitle(title) {
 document.title = title
 let mobile = navigator.userAgent.toLowerCase()
 if (/iphone|ipad|ipod/.test(mobile)) {
  let iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  // 替换成站标favicon路径或者任意存在的较小的图片即可
  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
}

应用入口main.js中调用setMetaTitle()函数

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文件调用

<h2 v-title="'页面标题'">通过指令设置页面标题</h2>

以上这篇vue-router动态设置页面title的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无用功.显得十分蠢. 使用Vue-Router的方法 首先打开/src/router/index.js文件. 找到如下代码. const vueRouter = new Router({ routes, mode: 'history', linkActiveClass: 'active-link',

  • 基于Vue的SPA动态修改页面title的方法(推荐)

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

  • 使用vue-router设置每个页面的title方法

    基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口

  • vue-router动态设置页面title的实例讲解

    由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题. 但是在IOS APP里这种方式不起作用,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 解决方案是在路由切换完成之后,静默加载一个空的iframe动态设置title util.js中定义setMetaTitle()函数 function setMetaTitle(title) { d

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • vue动态设置页面title的方法实例

    本文主要介绍了Vue动态修改title的方法,需要的朋友可以参考学习,方法如下: 1.通过自定义指令去修改(单个修改比较好) //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 <div v-title data-title="我是

  • vue router动态路由设置参数可选问题

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • 微信小程序实现动态设置页面标题的方法【附源码下载】

    微信小程序实现动态设置页面标题的方法【附源码下载】

    本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/modul

  • vue cli2.0单页面title修改方法

    一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • 通过Ajax请求动态填充页面数据的实例

    你可能得预先了解 实现功能:点击页面上的按钮实现动态追加数据 实现原理:点击页面按钮,通过Ajax提交请求到后台,后台接收请求后进行数据库操作,然后返回数据到前台并进行页面渲染 动态加载更多数据 代码实现 //1.页面布局 <div style="padding: 0 0 20px 0;"> <input type="hidden" class="tip" value="1"> <input st

随机推荐