vue设置网页title
最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title。下面总结一下解决的办法:
原先我使用的是document.title =to.meta.title来改变网页标题。
大家都知道使用Vue框架开发的应用是个单页面应用,里面用到的是路由的形式,并不像多页应用开发那样(下面附带区别)。所以想让网页的标题随着路由的改变而改变可以使用下面这个方法,目前已解决。
第一步:找到 router 文件夹下的index.js文件,在此引入:
第二步:在同文件下面的路由里面配置每个路由的地址:
第三步:在main.js 中写入以下代码去遍历每一个meta里面设置页面的title名字:
最后:这样就可以给每个路由对应的页面设置上了title,但是在我使用过程中遇到了个小问题。
如果页面跳转时要通过传参数去选择显示的子组件的话,这个方法实现不了,
我需要通过是否传tab=3去实现跳转的时候显示的是个人中心tab还是我的学习tab。这样title就不会变
这就有了下面这第二个方法(建议使用):
在vue2中还可以使用vue-wechat-title插件来解决页面title的问题
第一步:在项目根目录下打开命令行通过npm install vue-wechat-title --save来安装插件,像下面这样就安装成功了
第二步:同上面的方法一样,在路由里面配置的每个地址加上对应的title;
第三步:在 main.js 中引入并使用插件就可以了
第四步:在src目录下的app.vue中修改router-view,加入下面的这个组件
如果以上这些都操作都完成了之后,重新运行一下项目,应该就可以看到你设置的相应的title了~
vue设置网页title相关推荐
- vue 3.0中设置网页title
还有一种使用插件:https://juejin.cn/post/6844904165139808269 单页面应用渲染:https://juejin.cn/post/70228052388431790 ...
- 设置网页title标签小图标
第一次设置网页标签小图标,找了很多帖子方法都不管用. 有的说要放到网页根目录,有的说文件名必须要favicon.ico,有的说必须16x16.其实不必这么麻烦. 下面分享我用的方法(本地图片和cdn都 ...
- vue设置页面title
vue默认的title是项目的名称,需要进行修改,有两种方法. 方法一: 在 ./public/index.html 文件中直接修改. 方法二: 可以根据单个页面设置title. 打开设置路由(rou ...
- vue3.0中设置网页title
1.在public/index.html中设置title <title><%= htmlWebpackPlugin.options.title %></title> ...
- Vue 设置路由title
router下设置title如下 routes: [{path: '/login',name: 'login',component: Login,meta: {title: '我是登录'}}, ] 这 ...
- vue设置网页标题title
效果图在最后 一.第一种方法 在项目router文件夹下index.js里 添加标题title meta: { title: "xxx" } 在当前页最下面配置router rou ...
- 如何设置网页title旁边的小图标
正式写一个网页时,title旁边一般会有一个独特的小图标,如何自己写这样一个图标呢? 其实很简单,只需要在html文件中的<head></head>标签里加上: <lin ...
- React 设置网页title
我们可以通过listen监听数据的变化 1)需要在引入路由的时候引入withRouter import { Switch, Route, NavLink, Redirect, withRouter } ...
- 【vue】设置网页的标题和图标
[vue]设置网页在浏览器上打开时的标题和图标 设置步骤: 在根目录下找到并打开index.html文件: 设置的图标需要存放在static文件夹下(亲测存放在该文件夹下浏览器才能读取到): 在ind ...
最新文章
- 华硕ac68u最佳设置_灵耀X2 Pro和ARTone双双登场 华硕一举承包轻奢创作
- 脑电信号预处理--去趋势化(Detrended fluctuation analysis)
- 股票实时行情数据大全
- mk_trustonic.mk编译脚本
- 父亲节html代码,jquery怎么获取父亲节点?
- Flexible 弹性盒子模型之CSS justify-content 属性
- 【转】extern “C“和__declspec(dllexport)以及__declspec(dllimport) 和def的简单解析
- [转载] 王长松:传统文化与中医养生(东南大学)——第2讲 中医养生方法的源泉(上)...
- 揭秘支撑双 11 买买买背后的硬核黑科技!
- 独立开发一个完整的小程序,你想知道的流程
- 计算机网络放大器的作用,运算放大器工作原理是什么?
- 《深入学习VMware vSphere 6》——2.2 vSphere 6实验环境需求
- 详解网关和路由器的区别
- 大学英语六级高频词汇
- 泛型转换https://www.cnblogs.com/eason-chan/p/3633210.html
- 数学的意义——席南华院士科普讲座实录
- Android如何快速创建启动动画
- 西门子安装未找到ssf文件_三菱、西门子软件安装常见出错解决方法「技成周报40期」...
- 计算机毕业设计基于asp.net网上考试报名系统
- 解决H5播放视频黑屏只有声音没有图像的问题,Java调用ffmpeg转码成h264的mp4格式