vue-cli动态设置favicon和title

favicon是网站的小图标,title分为主副两个标题;

vue-cli动态设置favicon和title

 

 

 

由于favicon和title都是全局的设置,且一次性设置后,除了副标题,其他的都是不需要变动的,所以,在vuex的action获取了一次以后,就不需要重复设置。

设置favicon

 actions:{
    async getData({commit,state}){ 
      if(state.data.nickname) return;
      commit('setLoadingFlag', true)
      const data = await getSettings();
      commit('setData',data);
      commit('setLoadingFlag', false);
      //设置favicon
      if(state.data.favicon){
        var fav = document.querySelector('link[rel="icon"]');
        console.log(fav);
        if(!fav){
          fav = document.createElement('link');
          fav.setAttribute('rel','shortcut icon');
          fav.setAttribute('type','image/x-icon')
          fav.href = state.data.favicon;
          document.head.appendChild(fav);
        }
      }
      //设置title
      if(state.data.siteTitle){
        setTitle.setMainTitle(state.data.siteTitle)
      }

    }
  }

设置主副标题:

思路主标题是在store的action后,副标题是在每一个routes里设置meta的subtitle,然后在router.afterEach设置;

//设置网站标题
let mainTitle = '',
  subTitle = '';

  function concat(a,b){
    if( !a ){
      return b;
    } 
    if(!b){
      return a
    }
    return a + '-' + b;
  }

function resetTitle() {
  var title = document.getElementsByTagName('title')[0];
  if (!title) {
    title = document.createElement('title');
    title.innerText = concat(subTitle,mainTitle);
    document.head.appendChild(title);
  } else {
    title.innerText = concat(subTitle,mainTitle);

  }
}

function setMainTitle(mt) { //主标题
  mainTitle = mt;
  resetTitle();
}

function setSubTitle(st) {//副标题
  
  subTitle = st;
  resetTitle();
}


export default {
  setMainTitle,
  setSubTitle
}
//router.js
import Vue from 'vue'; import VueRouter from 'vue-router'; import routes from './routes'; import setTitle from '@/utils/setSiteTitle'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', // base: process.env.BASE_URL, routes, }) router.afterEach((to,from)=>{ if(to.meta.subTitle){ setTitle.setSubTitle(to.meta.subTitle) } }) export default router
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      subTitle: '主页'
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( '@/views/About/'),
    meta:{
      subTitle: '关于'
    }


  },
  {
    path: '/project',
    name: 'Project',
    component: () => import( '@/views/Project'),
    meta:{
      subTitle: '项目'
    }
  },
  {
    path: '/message',
    name: 'Message',
    component: () => import( '@/views/Message'),
    meta:{
      subTitle: '消息'
    }
  },{
    path: '/blog',
    name: 'Blog',
    component: () => import( '@/views/Blog'),
    meta:{
      subTitle: '文章'
    }
  },{
    path: '/blog/cate/:categoryId',//动态的路径,语法是 :id
    name: 'categoryBlog',
    component: () => import( '@/views/Blog'),
    meta:{
      subTitle: '文章'
    }
  },{  
    path: '/blog/detail/:blogId',
    name: 'blogDetail',
    component: ()=> import ("@/views/Blog/components/BlogDetail"),
    meta:{
      subTitle: '文章详情'
    }
  }


]

export default routes;

 

上一篇:Django model 中的 class Meta 详解


下一篇:html5中time元素详解