一、angular1动态修改网页title
1、在router.js中设置路由的title（国际化）
a.state('login',{
url:'/login',
templateUrl:'views/login.html',
controller:'loginCtrl',
title: {zh:'登录', en:'Login'}, // 国际化设置
title: '登录', //非国际化设置
resolve: {}
})
2、在app.min.js 中 angular.module("app").controller 构造器中 设置路由监听
// 国际化设置
const titleName = $cookie('pa_lang') || 'zh'; //国际化获取当前为中还是英，不一定是保存在cookie,有些会保存在sessionStorage中，非国际化不需要这步骤
// 监听路由成功时触发
$rootScope.$on('$stateChangeSuccess', function (toState) {
// 当路由存在title，动态变更当前的title name
if(toState.title && toState.title[titleName]) {
document.title = toState.title[titleName];
}
});
// 非国际化设置
// 监听路由成功时触发
$rootScope.$on('$stateChangeSuccess', function (toState) {
// 当路由存在title，动态变更当前的title name
if(toState.title) {
document.title = toState.title;
}
});
二、vue2.0动态修改网页title
1、route的index.js文件中设置routes路由规则,设置meta
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(Router)
const router = new Router({
mode: 'history', // hash或者history模式 /#/ 和 /
base: 'v1', // 路由前面的 如：/v1/login
routes: [
{
path: '/',
name: 'login',
redirect: '/home', // 路由重定向
component: Home // 视图组件
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), // 对应组件
children: [ // 子路由 如/about/profile
{
path: '/profile',
component: () => import('../views/vuexuse/index.vue'),
meta: { // 国际化title设置
title: { zh: '个人资料', en: 'profile' }
},
meta: { // 非国际化title设置
title: '个人资料'
}
}
]
}
2、在全局后置钩子设置对应的title name
// 国际化设置
import 'Cookie' from 'js-cookie'
router.afterEach((to, from) => {
Vue.nextTick(()=>{
const titleName = Cookie.get('pa_lang) || 'zh'; //国际化获取当前为中还是英，
不一定是保存在cookie,有些会保存在sessionStorage中
// 当存在title和中/英时，在修改title
if (to.meta.title && titleName) {
document.title = to.meta.title[titleName]; }
})
})// 非国际化设置
router.afterEach((to, from) => {
Vue.nextTick(()=>{
// 当存在title时，在修改title
if (to.meta.title) {
document.title = to.meta.title;
}
})
})