zoukankan      html  css  js  c++  java
  • vue修改title

    vue修改title

      之前试了好多方法,下面是亲自测试成功的两种方法。

    方法一:利用路由导航守卫

    1.先在index.js文件中加上meta属性

    {
        path: '/index',
        name: 'index',
        component:()=>import('@/views/index'),
        meta: { title: '首页' }
    }    
    {
      path:'/login',
      name:'login',
      component:()=>import('@/views/login')
      meta: { title: '登录页'} }

    2.在main.js中加上导航守卫

    记得将数据缓存,不然刷新页面后,title显示的内容就变了

    router.beforeEach((to,from,next){
        if(to.meta.title) {
        document.title=to.meta.title
        Cookies.set('title',document.title)   }   next() })
    new Vue({
      router,
      store,
      beforeCreate() {
        const title_ = Cookies.get('title')
        document.title = title_
      },
      render: h => h(App)
    }).$mount('#app')
    window.Vue = Vue

    方法二:使用插件

    1.安装插件

    npm install vue-wechat-title --save

    2.在main.js中引用、使用插件   

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

    3.在路由配置文件配置meta属性

    {
        path: '/index',
        name: 'index',
        component:()=>import('@/views/index'),
        meta: { title: '首页' }
    }    
    {
      path:'/login',
      name:'login',
      component:()=>import('@/views/login')
      meta: { title: '登录页'}
    }

    4.在app.vue中添加v-wechat-title指令

    <router-view v-wechat="$route.meta.title"></router-view>
  • 相关阅读:
    Java面試題(实用性高)
    索引的概述?
    给Eclipse提速的7个技巧
    ETL数据仓库
    实用SQL语句大全
    考证
    PL/SQL 程序
    eclipse
    httpd.conf详解,因为php始终报fileinfo扩展无法加载的错
    dockerfile创建镜像及容器
  • 原文地址:https://www.cnblogs.com/Maipocket-y/p/13441792.html
Copyright © 2011-2022 走看看