使用vue-router设置每个页面的title
来源:互联网 发布:gps手机号码定位软件 编辑:程序博客网 时间:2024/06/05 06:50
基本环境配置: webpack + vue2.0 + vue-router +nodeJS
进入 router 文件夹底下的index.js文件
首先引入:
import Vue from 'vue'import Router from 'vue-router'
然后在路由里面配置每个路由的地址:
routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { /* 修改昵称 */ path: '/modifyName/:nickName', name: 'modifyName', component: modifyName, meta: { title: '修改昵称' } }, { /* 商品详情 */ path: '/goodsDetail', name: 'goodsDetail', component: goodsDetail, meta: { title: '商品详情' } }, { /* Not Found 路由,必须是最后一个路由 */ path: '*', component: NotFound, meta: { title: '找不到页面' } } ]
在每一个meta里面设置页面的title名字,最后在遍历
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next()})
这样就为每一个VUE 的页面添加了title
阅读全文
0 0
- 使用vue-router设置每个页面的title
- vue-router动态设置页面title
- 使用 vue-router 跳转页面
- 使用vue-router页面跳转
- vue-router的使用
- vue-router的使用
- Vue-router的使用
- 【前端】vue-router配置title
- 使用vue的router-link
- Magento 获取每个页面的title
- vue-router跳转页面
- vue-router跳转页面
- vue 如何添加全局函数或全局变量以及单页面的title设置总结
- Vue title 动态设置
- vue-router路由的基础使用
- vue-router路由的基础使用
- Vue-router嵌套路由的使用
- vue-router 懒加载的使用
- Kafka心得小计
- FCN学习:Semantic Segmentation
- URL中传入Data参数的实现方法
- 数据结构-静态链表
- 《高性能MySQL》学习笔记二
- 使用vue-router设置每个页面的title
- 基于RFS的数据驱动
- [LeetCode]448. Find All Numbers Disappeared in an Array
- javascript中的for in 循环
- java的编译时多态和运行时多态
- 5天玩转C#并行和多线程编程 —— 第五天 多线程编程大总结
- Laravel-自定义验证规则
- Java程序中文件目录的跨平台 --- File.separator的作用
- Java集合框架Map