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;