vue设置网页title的问题

最新推荐文章于 2024-03-27 14:32:55 发布
最新推荐文章于 2024-03-27 14:32:55 发布
阅读量708 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tong_Zai_Yuan_Fang/article/details/89489813
版权

关于vue2设置标题推荐使用vue-wechat-title插件

npm install vue-wechat-title --save 下

看后我的使用方式

  1. 在 main.js 中

import VueWechatTitle from ‘vue-wechat-title’;
Vue.use(VueWechatTitle)

这样就能用了

  1. 路由中加下 title

{
path: ‘/’,
component: Index,
meta: {
title: ‘首页’
}
},

  1. 在app.vue 中修改 router-view ，加入他的这个组件

孔旗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue的个人网站设计vue-router、vue-cli、iview的项目（包含后台php与数据库）
05-27
基于vue的单页面应用项目代码，项目的演示地址https://www.ai0011.com/work/ 应用了vue路由、iview、php、mysql等技术
vue设置网站标题title
qq_32615575的博客
03-23 892
vue设置title
飞扬小阁
01-17 1万+
路由配置页router/index.js routes: [ { /* （首页）默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { /*
vue2 设置网页title的问题
u010227042的博客
05-29 426
感谢无私分享，亲测可用，亲们放心使用！ 好东东，没个标题看着多难受 看到1文章 http://blog.csdn.net/qishuixian/article/details/72912368 推荐使用 vue-wechat-title插件 npm install vue-wechat-title --save 下 看后我的使用方式 1. 在 main.js 中 impo...
vue路由跳转时更改页面title
qq_43579525的博客
04-29 723
一、router文件夹下的index文件中给每个path添加meta:{}： export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentIn...
浅谈vue2 单页面如何设置网页title
08-28
本文将浅谈Vue2单页面如何设置网页title，解决这个问题。 单页面应用程序的特点 单页面应用程序的特点是，整个Web站点其实都是一个index页面，所谓的页面跳转都是替换index.html里边的内容。这使得传统的每个页面...
vue动态设置页面title的方法实例
12-28
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下： 1.通过自定义指令去修改（单个修改比较好） //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: ...
使用vue-router设置每个页面的title方法
08-28
在 Vue 项目中，如何设置每个页面的 title 是一个非常重要的问题。使用 vue-router，可以轻松地实现设置每个页面的 title。下面我们将详细介绍如何使用 vue-router 设置每个页面的 title。 首先，在使用 vue-router...
Vue动态修改网页标题的方法及遇到问题
12-09
Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案: 一、最笨方案 结合业务直接在Vue生命周期函数 created 和 mounted 中，给 document.title赋值。 [removed] import axios from 'axios' export ...
vue项目动态设置浏览器标题title几种方法
发育中的前端
03-12 7124
方法一：使用vue-wechat-title插件设置 第一步：安装插件 npm vue-wechat-title --save 第二步：在main.js全局引入、使用插件 import VueWechatTitle from 'vue-wechat-title' //动态修改title Vue.use(VueWechatTitle); 第三步：在通过路由的mate属性携带title const routes = [{ path: '/login', component:
Vue设置了动态title，没生效或刷新失效
博客简介
01-19 2215
Vue设置了动态title，没生效或刷新失效的问题
Vue中动态设置页面title
weixin_34040079的博客
03-08 870
前言 更多内容，请访问我的 个人博客。 安装依赖 npm install vue-wechat-title --save 复制代码 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 复制代码 在router的index.js的路由中加上参数 { ...
动态修改Vue项目中的页面title
青梅煮码
05-19 1375
需求：修改框中的信息 一、在main.js中： // 设置浏览器标题 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 二、在某个页面最大的div上： 加上以下...
vue项目打包后网页的title乱码的问题解决
爱学习的大雄的博客
04-24 6435
遇到的问题： vue项目在本地运行时无乱码现象产生，但在我运行npm run build打包项目运行index.html后发现就是这个标题会出现乱码的情况 后来在经过查阅资料，发现是字符编码的问题。 尝试了网上一种办法，就是将乱码的文件使用电脑自带的记事本打开，然后选择utf-8字符编码另存为。这种方法可以在本机上实现问题的解决，但是当我把另存为的文件再次上传到linux服务器中部署后有产生了乱码问题 最终找到的解决方法如下： 在产生乱码的html的head中添加以下代码即可： <meta http
vue修改网站标题title的三种方法
热门推荐
foolishbig的博客
02-15 1万+
方法一 调用Vue.directive() 1.main.js里面添加一个全局指令 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 2.调用的组件里面，随便找一个div加入，v-title data-title="你的...
在 Vue.js 中设置网页标题
最新发布
qq_47452573的博客
03-27 958
如果你的应用使用了 Vuex 来管理状态，你也可以将标题作为状态的一部分，并在需要的地方更新它。然后，你可以使用 Vuex 的订阅功能来监听标题的变化，并更新。你可以考虑使用这些库来简化你的代码。如果你在使用 Vue Router，并且希望根据路由的不同来设置不同的标题，你可以在路由配置中定义标题，并在路由变化时更新。然后，你可以使用 Vue Router 的全局前置守卫来监听路由变化，并更新。不过，如何和何时设置这个标题取决于你的应用结构和需求。如果你需要在特定的 Vue 组件中设置标题，你可以在。
vue设置页面标题title
craftsman2020的博客
10-01 7502
vue设置页面标题title
如何修改Vue项目中的页面title
想好了再写！
04-08 8268
方法一：全局自定义指令修改 // 设置修改页面标题的自定义指令 Vue.directive('title',{ inserted: function(el){ document.title = el.getAttribute('title') console.log(el) } }) 方法二：使用beforeEach去统一设置（在路由配置文件配置） 方法三：简单粗暴的方式（直接在当前页面的created生命周期里面进行编写） 注意：以上三种方法的优先
vue设置网页title
zluz_的博客
09-25 1万+
最近用vue来做一个项目，到结尾的时候发现一个问题：不管开的是哪个组件的路由地址，网页的title都是index.html里面的title。下面总结一下解决的办法： 原先我使用的是document.title =to.meta.title来改变网页标题。 大家都知道使用Vue框架开发的应用是个单页面应用，里面用到的是路由的形式，并不像多页应用开发那样（下面附带区别）。所以想让网页的标题随着路由的改变而改变可以使用下面这个方法，目前已解决。 第一步：找到 router 文件夹下的index.js文件，在此引
Flask vue 开发网页
05-05
Flask 和 Vue 都是非常流行的 Web 开发框架。Flask 是一个用 Python 编写的轻量级 Web 框架，它提供了简单易用的路由、ORM、模板引擎等功能，可以用来快速搭建 Web 应用程序。Vue 是一个用于构建用户界面的渐进式框架，它可以与各种后端框架集成，提供了简单易用的数据绑定、组件化、路由等功能。 下面是一个使用 Flask 和 Vue 开发网页的简单示例： 1. 创建一个 Flask 应用程序 ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 2. 创建一个 Vue 组件 ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello, World!' } } } </script> ``` 3. 在 Flask 应用程序中引入 Vue 组件 ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 4. 在 index.html 中加载 Vue 组件 ```html <!DOCTYPE html> <html> <head> <title>Flask Vue App</title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="{{ url_for('static', filename='js/app.js') }}"></script> </body> </html> ``` 5. 在 app.js 中注册 Vue 组件 ```javascript import Vue from 'vue' import MyComponent from './components/MyComponent.vue' Vue.component('my-component', MyComponent) new Vue({ el: '#app' }) ``` 6. 运行 Flask 应用程序和 Vue 开发服务器 ```bash # 运行 Flask 应用程序 $ python app.py # 运行 Vue 开发服务器 $ cd static $ npm install $ npm run serve ``` 这样就可以在浏览器中访问 http://localhost:5000 查看网页了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值