Vue 改变/动态改变 title

叁歲伎倆 2022-05-11 01:50 372阅读 0赞

目的：vue改变 title。

分两种情况，

第一种你事先已经定义好了 title，比如 首页 啊什么的，

第二种，是你无法确认的，比如一个看文章的页面，这个 title 就是文章的标题，你事先无法知道用户获取的是那个文章。

第一种：

1-1、首先我们需要给路由设置 title

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70

1-2、在main.js 文件写入下面的代码 

  1. // 根据路由设置标题
  2. router.beforeEach((to, from, next) => {
  3.     /*路由发生改变修改页面的title */
  4.     if(to.meta.title) {
  5.       document.title = to.meta.title
  6.     }
  7.     next();
  8. })

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1

第二种：

2-1、安装一个插件 (没有安装 cnpm 可以使用npm)

  1. cnpm install vue-wechat-title --save

2-2、配置 main.js

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2

2-3、在你需要改变的页面 第一个div 上加上v-wechat-title=”this.title”, title 是下面再 data 里面定义的数据.

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3

2-4、动态的改变 title

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4

如果对你有帮助，可以关注一下我的公众号，谢谢。

20200302133853677.jpg

发表评论

表情：
评论列表 （有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读