(四)vue开发 - 根据vue-router的meta动态设置html里<title>标签的内容
2018-01-22 19:21
1466 查看
路由文件 :router/index.js
在入口文件 main.js中添加以下代码
import Vue from 'vue' import Router from 'vue-router' import index '@/view/index' import user from '@/view/user' Vue.use(Router) export default new Router({ routes: [ { path: '/index', name: 'index', component: index, meta:{ title:'首页' } }, { path: '/user', name: 'user', component: user, meta:{ title:'个人中心' } } ] })
在入口文件 main.js中添加以下代码
import Vue from 'vue' import App from './App' import router from './router' router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } next() }) new Vue({ el: '#app', router, template: '<App/>', components: {App} })
相关文章推荐
- HTML 头标签的 <title> <base> <meta> <link> <script> 的内容意思
- angularjs 中通过ui-router设置不同网页不同<title>内容
- vue中动态设置meta标签和title标签的方法
- vue中动态设置meta标签和title标签
- asp.net动态设置页面的title,meta标签
- html头文件设置常用之<meta>设置缓存
- html<meta>标签
- HTML <meta> 标签
- android开发 - <meta-data>标签
- 如何在html页面显示<…>标签内容
- asp.net动态设置页面的title,meta标签
- html标签title属性值包括<br/>处理
- html的<meta>标签的作用
- html头文件设置常用之<meta>设置缓存
- HTTP Compression <httpCompression> ,IIS 内容压缩,静态、动态内容压缩 设置
- 前端基础(6):html语法(5): <META> <H1-H6><UL><ol><LI><code>标签
- HTML <a>标签 title属性 鼠标悬停文字显示
- HTML页面加载完后,根据内容调整<textarea>元素的高度
- html头文件<meta>设置缓存
- struts2标签遍历时,显示内容忽略<html>代码问题