VUE “Title”修改
1.静态“Title ”
vue 在public 文件夹中有一个index.html,直接修改title中的值即可。这是最low的方法。
当然你的项目如果是使用webpack或者是vue-cli创建出来的项目,那么你会在title的地方看到
<%= htmlWebpackPlugin.options.title %>
或者
<%= webpackConfig.name %>
这两种写法。莫慌!!!!
第一种写法修改:
vue.config.js文件中的
chainWebpack: config =>{
config.plugin('html')
.tap(args => {
args[0].title = "标题";
return args;
})
}
第二种写法修改:
vue.config.js文件中的
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
2.动态“Title”
方法一:
第一步:在main.js里面添加一个全局指令
Vue.directive('title', {
inserted: function (el, binding) {
document.title = el.dataset.title
}
})
第二步:在要调用的组件里面,随便找一个div加入如下代码
v-title data-title=“我的”
案例:
<template>
<header class="header_home user_reg" v-title data-title="">
<div class="top_box hidden-xs">
<div class="container">
<router-link to="/" class="logo">
<img src="../../../assets/image/5b10f166c3332.png" alt="" />
</router-link>
<ul class="navs">
<li>
<router-link to="/regist">注册</router-link>
</li>
<li>
<router-link to="/login">登录</router-link>
</li>
<li>
<router-link to="/CooperUser">合作平台</router-link>
</li>
</ul>
</div>
</div>
</header>
</template>
方法二:
实现思路很简单:就是利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title
第一步:首先在route里面给每个路由加上meta属性
{
path: '/login',
name: 'login',
component(resolve) {
require(['./views/login.vue'], resolve)
},
meta: {
title: '登录页',
keepAlive: true, // 需要被缓存
}
},
{
path: '/regist',
name: 'regist',
component(resolve) {
require(['./views/regist.vue'], resolve)
},
meta: {
title: '注册页',
keepAlive: true, // 需要被缓存
}
},
{
path: '/newList',
name: 'newlist',
component(resolve) {
require(['./views/newsList.vue'], resolve)
},
meta: {
title: '新闻列表',
keepAlive: true, // 需要被缓存
}
}
第二步:在main.js里面加上导航守卫
router.beforeEach((to, from, next) => {
window.document.title = to.meta.title == undefined?'默认标题':to.meta.title
if (to.meta.requireAuth) {
let token = Cookies.get('access_token');
let anonymous = Cookies.get('user_name');
if (token) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
}
}
next();
})
路由守卫你可以放在别的地方。。
方法三:
vue-wechat-title 插件
推荐
1.安装依赖
npm install vue-wechat-title --save
npm install vue-wechat-title --save
2.引用在main.js
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3.在router.js中配置需要的title,每个不同的路由配置所属的title
{
path: '/',
name: 'homePage',
component: resolve => require(['../components/homePage'],resolve),
meta: {
title:"这是动态title",
content: 'disable',
}
}
4.监听路由变化改变title,还是在router.js中
router.beforeEach((to,from,next) =>{
// 路由发生变化修改页面title
if (to.meta.title) {
document.title = to.meta.title;
}
}
上面可以动态更改固定的一些title
但是往往我们使用的时候会遇到产品的详情页,相同路由下很多产品都对应不同的title,
在需要改变title的vue组件中
<template>
<div class="customerCaseDetail" v-wechat-title="这是是动态title">
</div>
</template>
关于插件的使用,大家可以网上百度其他的案例。