亲宝软件园·资讯

展开

vue设置路由title,刷新页面title失效

Jacy_Lee_LDF 人气:0

1. 在router/index.js中

使用meta属性的title设置好每个路由对应的title值

/* router/index.js: */
 
routes: [
    {
      path: '/',
      component: () => import('../login'),
      name: 'login',
      meta: {
        title: '用户登录'
      }
    },
    //.............
]

2.在main.js中设置路由守卫

vue页面切换时,网页title随之切换

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

按照常规步骤设置好路由的title,vue页面切换时,也确实实现了title的变化,但是我发现刷新页面之后title失效了!!!!

百度之后,发现很多人用 ‘ vue-wechat-title ’ 插件来设置title,尝试了一下,确实解决了我的问题

具体操作如下

同上在 router/index.js 中

使用meta属性的title设置好每个路由对应的title值

在项目的根目录下

打开命令行,通过npm install vue-wechat-title --save来安装该插件:(有一些编辑器自带Terminal命令行操作台,比如我用的WebStorm,可根据个人情况操作。)

在main.js中引入并且使用该插件

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

修改App.vue的路由标签

在 router-view 标签上添加 v-wechat-title='$route.meta.title' :

<template>
  <div id="app">
    <router-view v-wechat-title='$route.meta.title'/>
  </div>
</template>

自此,问题解决,以此给自己做个记录。

不知道别的小伙伴有没有遇到像我一样的问题,刷新页面之后title失效了,我百度了一下好像没有相关词条,如果有小伙伴遇到了跟我一样的问题,希望也能帮助到你。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论