Vue Spa切换页面时更改标题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在Vue组件化开发过程中，因为是单页面开发，但是有时候需要页面的title根据情况改变，于是上网查了一下，各种说法花(wo)里(kan)胡(bu)哨(dong)， 于是想到一个黑科技 documet.title="xxx";

随便创建一个项目，在独立的模块中，created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的，虽然用苹果机测试过有用，但是想到这样会影响我的代码洁癖。

<script>
export default {
    data(){
        return{
        }
    },
    created(){
        document.title="首页"
    },
}
</script>

于是在github上找到一个好用的东西 vue-wechat-title

通过 npm install vue-wechat-title  安装

引入需要的vue-router与页面需要的组件之后

const router = new VueRouter({
    mode: 'history',
    routes:[
        {
        name: 'index',
        path: '/',
        meta: {
               title: '首页'
          },
          component: index
        },
      {
          name: 'root',
          path: '/root',  
          meta: {
               title: '肉特'
        },
        component: root
        }   
  ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div> 

即可实现改变title效果。

以上是 Vue Spa切换页面时更改标题 的全部内容， 来源链接： utcz.com/z/380895.html

回到顶部