vue-cli動態設置favicon和title

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;