Vue 改变/动态改变 title

news/2024/7/9 23:35:22 标签: Vue, title, Vue 改变/动态改变 title

目的:vue改变 title

分两种情况,

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

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

 

第一种:

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

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

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

 

第二种:

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

cnpm install vue-wechat-title --save

2-2、配置 main.js

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

 2-4、动态的改变 title 

 

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

 


http://www.niftyadmin.cn/n/775378.html

相关文章

Spring Boot 2.X(十九):集成 mybatis-plus 高效开发

前言 之前介绍了 SpringBoot 整合 Mybatis 实现数据库的增删改查操作,分别给出了 xml 和注解两种实现 mapper 接口的方式;虽然注解方式干掉了 xml 文件,但是使用起来并不优雅,本文将介绍 mybats-plus 的常用实例,简化…

使用Vue,获取当前页面的 IP

目的:使用Vue,获取当前页面的 IP 说明:在做一个点赞功能,获取当前用户的ip,判断它是否点赞过。 第一步:使用vue引入外部js。(这里是使用搜狐的api来获取用户的ip) 直接在 index.ht…

springboot 2.0整合/使用pagehelper插件。

先说几个问题: 1、我开始在网上找教程的时候,说是要配置mybaits核心配置。但是我的项目里面根本没有这个配置文件。(我用的是springboot2.0,我是新手,有问题可以提出来)。 2、网上基本都是查询全部数据的…

浏览器基础原理-安全: 同源策略

同源概念: 如果两个 URL 的协议、域名和端口都相同&#xff0c;我们就称这两个 URL 同源 举例: <https://time.geekbang.org/?category1> <https://time.geekbang.org/?category0>同源策略概念: 浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。…

Elasticsearch系列---搜索执行过程及scroll游标查询

概要 本篇主要介绍一下分布式环境中搜索的两阶段执行过程。 两阶段搜索过程 回顾我们之前的CRUD操作&#xff0c;因为只对单个文档进行处理&#xff0c;文档的唯一性很容易确定&#xff0c;并且很容易知道是此文档在哪个node&#xff0c;哪个shard中。 但搜索比CRUD复杂&am…

React Hooks 一步到位

useState 用来声明状态变量。 import React, { useState } from react; // ... const [ count , setCount ] useState(0); // ... count 声明的变量setCount 设用来更新变量的函数0 初始值多个状态声明不能出现在条件判断语句中 useEffect 用来代替生命周期函数。 import…

Mybatis 之 #和 $ 的区别

1、 #{}相当于占位符&#xff0c;而${}相当于字符串拼接 eg: select * from user where username #{v} 这句sql 没问题。 比如我们传递的参数是 王五 &#xff0c; 那么#{v} 等同于 王五 eg: select * from user where username ${v} 这句sql就报错。比如我们传递的参…