Vue3从入门到实战：路由知识点

本人在B站上关于vue3的尚硅谷的课程，以下是整理一些笔记。 

1.两个知识点

1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

组件可以分为：

1. 一般组件：亲手写标签出来的

2. 路由组件：靠路由的规则渲染出来的        

比如：

routes:[//一个个的路由规则 
        {
             path:'/home',
             component:Home
        },
        {
            path:'/about',
            component:About
       },
       {
             path:'/news',
             component:News
        },

    ]

遵循vue中的规则：

一般组件放在components文件夹中，路由组件放在pages 或 views文件夹。

---

2.通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

比如我在路由组件About中使用生命周期钩子来输出日志信息来观察展示区是如何"消失的"

<template>
    <div class="about">
      <h2>大家好，欢迎来到小李同学的博客</h2>
    </div>
  </template>
  
  <script setup lang="ts" name="About">
    import {onMounted,onUnmounted} from 'vue'
  
    onMounted(()=>{
      console.log('About组件挂载了')
    })
    onUnmounted(()=>{
      console.log('About组件卸载了')
    })
  </script>
  
  <style scoped>
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgb(85, 84, 84);
    font-size: 18px;
  }
  </style>

<