使用使用vue-router为每个路由配置各自的为每个路由配置各自的title
传统方法传统方法
以前在单页面路由中，就只能在html文件中定一个固定的网站的title。如果想要动态的去修改，需要使用如下的方法。
document.title = '这是一个标题';
这样会让我们做很多无用功。显得十分蠢。
使用使用Vue-Router的方法的方法
首先打开/src/router/index.js文件。
找到如下代码。
const vueRouter = new Router({
routes,
mode: 'history',
linkActiveClass: 'active-link',
linkExactActiveClass: 'exact-active-link',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
});
vueRouter只是一个变量名。叫什么可以根据你自己项目的命名来找，只要是Router实例化的一个对象就OK。然后将上述代
码替换成如下代码。
const vueRouter = new Router({
routes,
mode: 'history',
linkActiveClass: 'active-link',
linkExactActiveClass: 'exact-active-link',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
},
});
vueRouter.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
代码的逻辑就是在路由将要发生变化的时候，用传统的方法来对每个将要跳转到的路由的title进行修改。
配置路由配置路由
配置好了index.js之后我们就需要去给每个router配置自己的title了。例如。
{
path: '/',
name: 'Home',
component: () => import('@/views/Home/Home'),
meta: {
title: '首页',
},
}
给每个路由加上一个叫meta的属性。meta属性里的属性叫title，也就是每个路由独特的title了。加上之后，浏览器里每个路由
都会有自己设置好的title了。
总结总结
weixin_38527978
- 粉丝: 5
- 资源: 900
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0