vue3 使用小结

vue3 使用小结

nextTick的作用

获取页面更新之后的数据

app中应用多个layout

vue3+router4
LayoutX.vue

<template>
...
<router-view  />
...
</template>

做成多个layout文件

layout-----Layout1.vue
　　　|—Layout2.vue

为页面配置layout

router配置文件router/indexjs中为页面指定layout

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [ 
    {
      path: '/url1',
      name: 'url1',
      meta: {
        layout: 'layout1'
      },
      component: () => import('../views/Url1.vue')
    },
     {
      path: '/url2',
      name: 'url2',
      meta: {
        layout: 'layout2'
      },
      component: () => import('../views/Url2.vue')
    },
  ]
  }）
  export default router

app中注册layout

main.js

.....
import App from './App.vue'
import Layout1 from './layout/Layout1.vue'
import Layout2 from './layout/Layout2.vue'
......
const app = createApp(App)
app.component("layout1", Layout1)
app.component("layout2", Layout2)
.....

App.vue中根据router配置获取对应layout并适用

<template>
	<component :is="layout" />	
</template>
<script setup lang="ts">
import { useRoute } from ‘vue-router’
const route = useRoute()
const layout = computed(() => {
	return route.meta.layout
})
</script>

判断变量值是否为undefined