Vue 设置路由title

router下设置title如下

routes: [{path: '/login',name: 'login',component: Login,meta: {title: '我是登录'}},
]

这个时候注意设定完该title目前没有作用，因为他目前只是存在于路由记录中

这个时候我们需要在全局后置钩子中让添加title，全局后置钩子是在导航确认后，DOM更新前调用，因此比较合适

// 全局后置钩子
router.afterEach(to => {// 设置titledocument.title = to.meta.title;
})

效果如下：

Vue 设置路由title相关推荐

vue设置页面title
vue默认的title是项目的名称,需要进行修改,有两种方法. 方法一: 在 ./public/index.html 文件中直接修改. 方法二: 可以根据单个页面设置title. 打开设置路由(rou ...
Vue动态设置路由title
{ path: '/videoCover', component: () => import ('./view/videoCover.vue'), meta: {title: ''}, }, 需 ...
vue设置网页title
最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title.下面总结一下解决的办法: 原先我使用的是document.t ...
vue 设置路由导航守卫控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下 ...
Vue设置路由后页面仍不显示为空白
问题现象设置了路由,新增的页面的页面依然显示空白,没有任何报错. 问题原因与解决办法出现这个问题只能说明路径或配置写错了. 第一步:检查配置:router/index.js中的routes不要写成 ...
vue设置路由登录权限
在路由文件index.js中,将需要登录权限的路由设置meta属性 let router = new Router({mode: 'history',routes: [{path: '/parkPay ...
vue 设置每个页面的title
vue 设置每个页面的title 由于vue文件中只有一个Index.html 文件 title 显示需要通过document.title来设置 1.router---index.js文件中添加met ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
vue 3.0中设置网页title
还有一种使用插件:https://juejin.cn/post/6844904165139808269 单页面应用渲染:https://juejin.cn/post/70228052388431790 ...

Vue 设置路由title

Vue 设置路由title相关推荐

最新文章

热门文章