[置顶] 在vue路由变化的时候,改变页面的title
2018-02-27 10:49
711 查看
由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题。
基本环境配置: 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名字,最后在遍历main.js 中写入
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() })这样就为每一个VUE 的页面添加了title链接:http://blog.csdn.net/qq_24147051/article/details/76997838
相关文章推荐
- [置顶] 当vue路由变化时,改变导航栏的样式
- Vue页面在苹果设备中微信(X5)浏览器title不改变的解决方法
- vue路由只变化参数页面组件不更新问题
- angularJS监听路由变化改变页面内容
- 当vue路由变化时,改变导航栏的样式方法
- 解决vue 路由变化页面数据不刷新的问题
- IP数据包经由路由转发的时候,源ip和目的IP是否改变 推荐
- 使用vue-router为每个路由配置各自的title
- Vue模拟数据,实现路由进入商品详情页面的示例
- vue 点击按钮改变页面显示内容
- vue 刷新之后 嵌套路由不变 重新渲染页面的方法
- Response.Write()语句造成页面布局改变以及字体变化的解决办法
- 【vue】——使用watch 观察路由变化,重新获取内容
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue路由拦截及页面跳转的设置方法
- Vue下路由History模式打包后页面空白的解决方法
- 切换标签离开当前页面时改变title提示
- 点击页面卡住不动,有可能导航栏 title 变化了,但页面没更新,关于左滑手势
- openstack新建虚机、网络、路由时候对应的ovs网桥的变化
- vue项目实践教程2:使用vux设计登录注册,并讲解vue路由,切换页面标题等内容