一、keep-alive組件緩存:html
<!--這裏是須要緩存的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!--這裏不會被緩存的--> <router-view v-if="!$route.meta.keepAlive"></router-view>
keep-alive緩存組件有兩個生命週期鉤子函數:activated(組件激活時調用)、deactivated(組件停用時調用),對應created、destroyed。
針對業務上的一些全局公共組件,好比在一個被緩存的組件引入此公共組件,同時要綁定了一個事件,vue
mounted() { this.$nextTick(() => { window.addEventListener('click', function, false); }) },
那麼退出組件時要註銷該事件,git
destroyed: function() { window.removeEventListener('click', function, false);//離開的時候註銷事件 },
同時也要在deactivated裏執行一次註銷事件,由於被緩存的組件不會被銷燬。github
二、Vue構建的單頁應用,假設情景是從列表頁跳轉到詳情頁,若是業務要求必須打開新窗口,即用target="_blank"。此時若是兩個窗口頁面之間都有用到vuex state數據的話,好比共享同一個id數組,那麼列表頁修改了state數據後,詳情頁就不能實時更新state數據。此時只能使用localStorage來實現效果了。vuex
三、vue-meta,更優雅的管理頭部標籤(動態設置meta:keywords,description和title標籤,有利於SEO,能夠和prerender-spa-plugin預渲染搭配使用。)
參考:https://vue-meta.nuxtjs.org/f...
http://www.zhuyuwei.cn/2018/v...api
四、Vue SPA項目SEO優化之預渲染Prerender-spa-plugin,https://github.com/chrisvfrit...
相關bug:
此報錯解決方法:
參考:https://github.com/chrisvfrit...跨域
//在此處添加args參數 renderer: new Renderer({ args: ['--no-sandbox', '--disable-setuid-sandbox'], })
此報錯解決方法:
參考:https://github.com/chrisvfrit...數組
//此參數是build完成後自動打開chromium瀏覽器,方便調試,默認是true(不自動打開chromium)false是自動打開,但若是服務器是無界面的,好比centOS,ubantu,則會報錯上面信息,刪除headless參數便可。 renderer: new Renderer({ headless: false, })
預渲染build時的跨域配置瀏覽器
server: { // Normally a free port is autodetected, but feel free to set this if needed. port: 9292, proxy:{ '/api': { target: 'https://www.xxxxxxx.com', changeOrigin: true, //是否跨域 pathRewrite: { '^/api': 'api' //須要rewrite重寫的, } } } },