vue动态设置页面title vue动态设置页面title的方法实例
Levy 人气:3想了解vue动态设置页面title的方法实例的相关内容吗,Levy在本文为您仔细讲解vue动态设置页面title的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue设置title,vue动态修改title,vue在片头加标题,下面大家一起来学习吧。
本文主要介绍了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="我是新的标题"></div>.
2.使用插件 vue-wechat-title
//1.安装插件 npm vue-wechat-title --save //2.在main.js里面引入插件 import VueWechatTitle from 'vue-wechat-title'//动态修改title Vue.use(VueWechatTitle) //3.在路由里面 添加title routes: [{ path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页' } },] //4.在app.vue 中添加 指令 v-wechat-title <router-view v-wechat-title='$route.meta.title' />
3.通过 router.beforeEach 导航守卫来修改
//1.在router的index里写自己的路径和title const router = new Router({ routes: [ { path: '/login', component: Login, meta: { title: '登录', }, }, { path: '/home', component: Home, meta: { title: '首页', }, }, ], }) //2.使用router.beforeEach对路由进行遍历,设置title router.beforeEach((to, from, next) => { //beforeEach是router的钩子函数,在进入路由前执行 if (to.meta.title) { //判断是否有标题 console.log(to.meta.title) document.title = to.meta.title } else { document.title = '默认title' } next() })
4.使用 vue-mate 修改 title
https://github.com/declandewet/vue-meta 文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息
总结
加载全部内容