vue3中页面加载方法

在Vue3项目开发中，实现页面加载时执行特定逻辑是一个常见的需求。最简单直接的解决方案是利用onMounted生命周期钩子函数来完成页面加载后的初始化操作，也可以结合Suspense组件处理异步依赖加载，或使用路由守卫来控制页面加载时机。

一、使用onMounted钩子

这是最常规的方式。我们可以在组件中导入onMounted函数，然后将要执行的代码放在它对应的回调函数里。

vue

  <div id="app">
    <!-- 页面内容 -->
  </div>
</p>


import { onMounted } from 'vue'

onMounted(() => {
  // 执行页面加载后的逻辑
  console.log('页面已加载')
  // 可以在这里进行数据获取、DOM操作等
})


<p>

如果需要异步获取数据，可以这样做：

vue</p>


import { ref, onMounted } from 'vue'
import axios from 'axios'

const data = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('https://api.example.com/data')
    data.value = response.data
  } catch (error) {
    console.error(error)
  }
})


<p>

二、使用Suspense组件

当页面有异步依赖（如组件异步加载或者异步获取数据）时，Suspense组件就非常有用。

vue

  
    
      
    
    
      <div>加载中...</div>
    
  
</p>


// 异步组件定义
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)


<p>

三、使用路由守卫

对于页面级别的加载控制，路由守卫提供了更强大的功能。例如在页面加载前进行权限验证等操作。

javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'</p>

<p>const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]</p>

<p>const router = createRouter({
  history: createWebHistory(),
  routes
})</p>

<p>router.beforeEach((to, from, next) => {
  // 在这里可以进行一些全局的页面加载前的判断和操作
  // 比如权限验证、登录状态检查等
  console.log('准备加载页面：' + to.path)
  next()
})</p>

<p>export default router

以上就是在Vue3中实现页面加载的方法，开发者可以根据实际场景选择合适的方式。