vue组件插槽，路由，生命周期，路由卫士

最新推荐文章于 2023-03-27 10:27:20 发布

zexin-lai

最新推荐文章于 2023-03-27 10:27:20 发布

阅读量135

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_37648452/article/details/107326355

版权

本文介绍了Vue组件的插槽用法，详细讲解了路由的创建、配置，包括hash模式和history模式，以及动态路由和参数传递。同时，探讨了组件的生命周期和两种类型的路由卫士：全局路由卫士和单页路由卫士。

摘要由CSDN通过智能技术生成

1.组件插槽

<!--App.vue-->
<template>
  <div id="app">
    <layout>
      <template v-slot:left><!--对应的组件插槽name-->
        <div class="left">左边</div>
      </template>
      <template v-slot:right><!--对应的组件插槽name-->
        <div class="right">右边</div>
      </template>
    </layout>
  </div>
</template>


<script>
import layout from "./components/layout";
export default {
    
  name: 'App',
  components: {
    
    layout
  }
}
</script>


<!--component/layout.vue-->
<template>
    <div>
        <div>这是头部</div>
        <div>
            <h1>这是左边</h1>
            <slot name="left"></<