vue 设置每个页面的title

由于vue文件中只有一个Index.html 文件

title 显示需要通过document.title来设置

1.router---index.js文件中添加meta属性

export default new Router({// mode: 'history',routes: [{path: '/',name: 'Home',component: function(resolve){ require(['../components/model/index_home.vue'],resolve)},meta: {title: '锦穗'}},{//腕表path:'/watchPage',name:'watchPage',component:function(resolve){ require(['../components/model/watchPage/watchPage.vue'],resolve)},meta: {title: '腕表'}},{path:'/sosPage',name:'sosPage',component:function(resolve){ require(['../components/model/watchPage/sosPage.vue'],resolve)},meta: {title: 'sos'}}]
})

2.在main.js 在每一个meta里面设置页面的title名字，最后在遍历

router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}next()
})

1.Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/ 2.Vue.afterEach(function(to,form))/在跳转之后判断/ 在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 beforeEach函数有三个参数： to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed (确认的)；否则为false，终止导航。 afterEach函数不用传next()函数

vue 设置每个页面的title相关推荐

使用vue-router设置每个页面的title
基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件首先引入: import Vue from 'vue' ...
使用vue-router的meta实现设置每个页面的title标题
1.实现效果(左上角title变化) 2.核心代码: 1.这里主要是 meta 属性下面设置一个自定义的键值 title 2.在前置导航守卫里面如下: router.beforeEach((to,fr ...
动态改变vue项目页面的title
其实也没啥,就是一句代码的事,只不过看在哪里执行而已.这句代码是: document.title = "新题目"; 一.动态改变vue项目页面的title vue只是一个前端框架, ...
页面的title为乱码的话需要修改jsp页面pageEncoding=UTF-8
页面的title为乱码的话需要修改jsp页面pageEncoding="UTF-8" 转载于:https://blog.51cto.com/javazyx/1301876
修改html页面的title,可以自定义
方式一: document.getElementsByTagName("title")[0].innerText = '需要设置的值'; document.title方式经过测试 ...
.Net语言 APP开发平台——Smobiler学习日志：如何设置页面的title
1.修改Mobile Form的TitleText的属性输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性其中包括Image属性(窗体图标).BackColor属 ...
android读取网页标题,如何获取WebView中页面的Title信息
应用开发中需要获取WebView当前页面的标题,可能通过对WebChromeClient.onReceivedTitle()方法的重写来实现代码如下:public class MainActivit ...
vue设置ioc图标和title
摘自:https://www.cnblogs.com/s313139232/p/9007326.html 1.ioc图标设置在根目录中的index.html中引入代码: 1 <link rel ...
修改母版中页面的Title
三.修改母版页的内容.(原创:灰灰虫的家http://hi.baidu.com/grayworm) 当我们在运行不同的内容页面时,要求母版面的内容也会根据不同的内容页面发生不的变化时,如何做呢?比如, ...

vue 设置每个页面的title

vue 设置每个页面的title

vue 设置每个页面的title相关推荐

最新文章

热门文章