Vue下动态修改title标题 - 会coding的HAM

Vue下动态修改title标题

BG7ZAG

|

2018-4-16 14:24

|

2,382

|

0

|

245 字

|

2 分钟

安装 vue-wechat-title 插件，

npm install vue-wechat-title --save

在main.js 中，

Vue.use(require('vue-wechat-title'))

路由定义(只截取一部分)：

// ...
const routes = [
{
name: 'Home',
path: '/home',
meta: {
title: '首页'
},
component: require('../views/Home.vue')
},
{
name: 'Order',
path: '/order',
meta: {
title: '订单'
},
component: require('../views/Order.vue')
},
{
name: 'UCenter',
path: '/ucenter',
meta: {
title: '用户中心'
},
component: require('../views/UCenter.vue')
}
]
// ...

App.vue 建议全局只使用一次该指令标题可用vuex或者router中定义不要多处使用!!

<div v-wechat-title="$route.meta.title"></div>
<router-view v-wechat-title="$route.meta.title"></router-view>

自定义加载的图片地址默认是 ./favicon.ico 可以是相对或者绝对的

<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>

动态修改在组件中，设置：

this.$route.meta.title = '标题名称'

项目：https://github.com/deboyblog/vue-wechat-title

title Vue 标题

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!