插槽的使用和用法：slot
为什么要使用插槽：
在Vue.js等前端框架中
在Vue.js等前端框架中，插槽（Slot）是一种强大的工具，允许开发者在组件之间动态地传递和呈现内容。使用插槽的主要原因包括：
- 组件复用性：允许在多个组件中重复使用相同组件，但呈现不同内容，提高了代码的复用性。
- 灵活布局：开发者可以自定义内容布局，创建复杂和动态的用户界面。
- 代码分离：将内容呈现与组件逻辑分离，提高了代码的可管理性。
- 可扩展性：轻松添加或覆盖插槽，扩展组件功能。
- 高度自定义：开发者可以动态修改组件行为和外观，满足不同的使用场景需求。
- 响应式设计：支持内容根据可用空间动态调整，实现响应式应用程序。
组件通信生父与子组件之间的数据传输，
插槽可以让父组件给子组件转递模板（dom标签）
怎么使用呢？
代码示例：
Click me!
而的模板是这样的：
元素是插槽出口，标示了父元素提供的插槽内容将在哪里被渲染
插槽的分类：
默认插槽：使用默认名: default, 一个组件只能有一个默认插槽
路由是什么
干什么用的
问什么要学他
路由：通过导航，超链接，进行组间之间的跳转
前端路由器:管理多个路由的，就称为路由器
路由器和路由的关系：
router：路由器：关联一组路由：一个项目只有一个
route：路由：组件与url的映射，有多个路由
关系图：
它需要安装vue-router依赖：
vue-router的官网: Vue Router | Vue.js 的官方路由
4.x版本
步骤:
- 安装vue-router
#npm
pm install vue-router@4
#yarn
yarn add vue-router@4
为了不写css,使用Bootstrapyarn add bootstrap3在main.js中导入bootstrap.cssimport 'bootstrap/dist/css/bootstrap.css'
- 在src创建一个router目录, 存放vue-router的配置, 并且在该目录下创建一个index.js文件(配置文件)
- 编写页面组件, 首页, 关于
为了区分: 页面组件, 局部组件
components: 存放的局部组件
views/pages: 存放页面组件
- 在router/index.js配置路由规则,以及创建路由器对象
代码示例：//vue-router配置文件
//1.从vue-router导入createRouter() 创建路由器对象
// createWebHistory() 路由历史模式 url显示方式
import { createRouter, createWebHistory } from 'vue-router'
//2.导入Index,About组件
import Index from '../views/Index.vue'
import About from '../views/About.vue'
//3.配置路由规则: 给组件绑定url
const routes = [
{
path: "/index",
component: Index
},
{
path: "/about",
component: About
},
];
//4.创建路由器对象
const router = createRouter({
routes, //路由规则
history: createWebHistory()
});
//5. 把路由器对象暴露出去 其他组件文件,导入
export default router;
5.在main.js文件中, 使用路由器对象, 把路由器对象绑定到vue实例上
//导入路由器对象
import router from './router';
createApp(App).use(router).mount('#app')
6.在App.vue 实现页面跳转
使用/ 组件,本质就是一个超链接
首页
关于
<!--显示路由对应组件的内容区域--> <router-view></router-view>