網頁全屏看起來非常美麗，具有強烈的視覺沖擊力和極佳的用戶體驗。在Vue跨頁面切換時，如何實現全屏呈現頁面內容呢？這是本文要介紹的內容。

一種最簡單的實現方式是使用CSS的全屏API，給Vue的路由頁面指定一個全屏的樣式，例如：

.full-screen {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}

通過設置樣式的height和width屬性值為100%，將頁面的高寬設為全屏狀態；position:absolute屬性為定位元素，top、left屬性控制元素的位置，并設置為0，這樣頁面的內容就會鋪滿整個屏幕。將該樣式掛載在路由上，即可實現頁面全屏效果。

然而，如果頁面內容較多，需要滾動才能看到，此時因為元素定位使用的是absolute屬性，便不再跟隨頁面的滾動而滾動。因此，無論怎樣操作滾動條，畫面都不會滾動，會出現內容被遮擋的問題。

為了解決滾動條跟隨變化的問題，可以使用v-full-screen指令。先給vue實例添加一個v-directive.js到/directives的文件夾中，示例代碼如下：

import Vue from 'vue';
Vue.directive('full-screen', {
inserted(el) {
el.style.height = window.innerHeight + 'px';
el.style.overflow = 'auto';
},
componentUpdated(el) {
el.style.height = window.innerHeight + 'px';
},
});

在這里，我們使用Vue.directive全局API定義了一個名為full-screen的指令，inserted處理頁面初始加載時的該元素高度設置，componentUpdated監聽元素更新時的變化。通過獲取當前窗口高度，拼接為字符串再賦值，使得元素的高度跟隨窗口高度變化。

值得注意的是，容器內部有大量內容時，需要不同的滾動條樣式。此時可以在CSS中進行樣式的設置，具體樣式設計可以參考Element scrollbar。

除了使用指令以外，我們還可以通過mixins過渡頁面，使得整個應用具有全屏效果。我們定義一個full-screen的Mixin，用來處理組件顯示的高度：

import defer from 'lodash/defer';
export default {
data() {
return {
fullScreen: false,
};
},
mounted() {
defer(() =>{
this.fullScreen = true;
window.onresize = e =>{
this.height = e.target.innerHeight;
};
});
},
computed: {
fullScreenHeight() {
return this.height - 50;
}
},
};

通過組件的mounted方法，在事件隊列中延遲處理，進行v-if相關的變量修改。在全屏模式下需要監聽窗口大小的變化，當重新計算full-screen的高度時，也會受到影響，需要進行窗口高度的設置。

以上介紹了兩種實現Vue路由切換全屏的方法，使用CSS樣式和使用Mixins，你可以根據自己的需求進行選擇，實現跨頁面無縫切換全屏效果。