快速了解使用路由器

插槽的使用和用法：slot

为什么要使用插槽：

在Vue.js等前端框架中

在Vue.js等前端框架中，插槽（Slot）是一种强大的工具，允许开发者在组件之间动态地传递和呈现内容。使用插槽的主要原因包括：

1. 组件复用性：允许在多个组件中重复使用相同组件，但呈现不同内容，提高了代码的复用性。
2. 灵活布局：开发者可以自定义内容布局，创建复杂和动态的用户界面。
3. 代码分离：将内容呈现与组件逻辑分离，提高了代码的可管理性。
4. 可扩展性：轻松添加或覆盖插槽，扩展组件功能。
5. 高度自定义：开发者可以动态修改组件行为和外观，满足不同的使用场景需求。
6. 响应式设计：支持内容根据可用空间动态调整，实现响应式应用程序。

组件通信生父与子组件之间的数据传输，

插槽可以让父组件给子组件转递模板（dom标签）

怎么使用呢？

代码示例：

Click me!

而的模板是这样的：

元素是插槽出口，标示了父元素提供的插槽内容将在哪里被渲染

插槽的分类：

默认插槽：使用默认名: default, 一个组件只能有一个默认插槽

路由是什么

干什么用的

问什么要学他

路由：通过导航，超链接，进行组间之间的跳转

前端路由器:管理多个路由的，就称为路由器

路由器和路由的关系：

router：路由器：关联一组路由：一个项目只有一个

route：路由：组件与url的映射，有多个路由

关系图：

它需要安装vue-router依赖：

vue-router的官网: Vue Router | Vue.js 的官方路由

4.x版本

步骤:

1. 安装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'

1. 在src创建一个router目录, 存放vue-router的配置, 并且在该目录下创建一个index.js文件(配置文件)

1. 编写页面组件, 首页, 关于

为了区分: 页面组件, 局部组件

components: 存放的局部组件

views/pages: 存放页面组件

1. 在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>