Vue 全屏效果实现：谷歌浏览器进入页面即全屏

你可以使用 Vue 的全局导航守卫来实现在进入页面时自动全屏的效果。下面是一个示例代码：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 全局导航守卫
router.beforeEach((to, from, next) => {
  // 检查是否支持全屏
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen()
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen()
  }

  next()
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上面的代码中，我们使用router.beforeEach方法来注册一个全局导航守卫。当进行页面导航时，该导航守卫会被触发。在导航守卫的回调函数中，我们检查浏览器是否支持全屏，并使用相应的 API 来请求全屏。

请注意，全屏功能在不同浏览器中的 API 名称可能会略有不同，因此我们需要使用多个条件来适配不同的浏览器。同时，为了使全屏效果更为稳定，我们可以将全屏请求放在next方法之前，确保在页面切换之前进行全屏请求。

在main.js中将以上代码添加到 Vue 实例的创建之前，这样在每次进入页面时都会自动全屏。当然，你也可以根据自己的需求选择在特定的路由上进行全屏操作。