Vue全套笔记（二）动态组件 插槽 路由

admin管理员组

文章数量:1633987

文章目录

• • 动态指令
  • 插槽
  • 自定义指令
  • 路由
  • • 路由基本概念
    • vue-router的基本使用
    • vue-router 的常见用法
    • • 路由重定向
      • 嵌套路由
      • 动态路由匹配
      • 声明式导航&编程式导航
      • 导航守卫

动态指令

1. 什么是动态组件
   动态组件指的是动态切换组件的显示与隐藏。

2. 如何实现动态组件渲染
   vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下：
   is组件指定哪个组件就显示哪个， 绑定了两个事件在两个按钮上，以切换组件
   

3. 使用 keep-alive 保持状态
   默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的<keep-alive> 组件保持动态组件的状态。示例代码如下：
   用keep alive包裹后，就可以缓存切换后之前组件的数据，下次切换回来就可以直接使用，而不是重新置初始值，原来是切换就直接删除和创建组件对象，现在是缓存之前的组件
   
   效果：inactive是缓存了
   

4. keep-alive 对应的生命周期函数
   当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
   当组件被激活时，会自动触发组件的 activated 生命周期函数
   

5. keep-alive 的 include 属性
   include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：
   
   还有exclude属性用来排除匹配的组件，include和exclude只能用一个。

插槽

1. 什么是插槽
   插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
   
   可以把插槽认为是组件封装期间，为用户预留的内容的占位符。小霸王游戏机就比如我们的组件，里面预留的插卡的位置即为插槽，你不预留插槽就无法插卡。

如这个left里面写的P标签就无法渲染到页面上，因为没有预留插槽
如果在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃

2. 体验插槽的基础用法：

如果预留了一个插槽，就会自动填充到插槽的位置，就可以渲染p标签了

插槽实战：使用element-UI自定义 el-table-column 中的内容：

像这种按钮效果的实现，不是element ui自带的，如果直接把布尔数据放上去只会显示true和fasle，所以就通过插槽来使用element-UI官方给我们留下的自定义方式来设计:

<el-table-column  label="状态" prop="mg_state">
        <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state"  active-color="#13ce66" inactive-color="#ff4949">
        </el-switch> // 这也是element UI的开关组件
      </template>
      </el-table-column>

插槽默认的值是default，如果想要把指定内容的值填充到指定插槽，要用v-slot指令,但是要用template标签来加上v-slot指令。用template标签来包裹指定的内容。另外 v-slot也有简写形式： #

后备内容：
可以在插槽中写上后备内容，或者叫默认内容，当没有插入东西时会默认展示：直接写在slot标签内

具名插槽：
带有名字的插槽，插槽多了，每个都要指定名字。

作用域插槽：
带数据的插槽就是作用域插槽
在预留插槽的时候声明数据项 scope（形参任意起名）在使用插槽的时候就可以用 = 号接受这个数据项

也可以使用解构赋值接受：而不是直接接受一个对象

自定义指令

1. 什么是自定义指令
   vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

2. 自定义指令的分类
   vue 中的自定义指令分为两类，分别是：
   ⚫ 私有自定义指令
   ⚫ 全局自定义指令

3. 私有自定义指令
   在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：
   

4. 使用自定义指令
   在使用自定义指令时，需要加上 v- 前缀。示例代码如下：
   

5. 为自定义指令动态绑定参数值
   在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：
   

6. 通过 binding 获取指令的参数值
   在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：
   

7. update 函数
   bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。示例代码如下
   

8. 函数简写
   如果 insert 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式，相当于同时写了bind和update函数
   

9. 全局自定义指令
   全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下
   
   eslint:代码规范工具，安装了之后如果不符合规范就会报错，这个不重点介绍了。

路由

路由基本概念

1. 什么是路由
   路由（英文：router）就是对应关系。前后路由和计算机网络的路由器不是一个概念，这个是链接对应相应的组件，以完成组件的切换的效果。

2. SPA 与前端路由
   SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
   此时，不同组件之间的切换需要通过前端路由来实现。
   结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

3. 什么是前端路由
   通俗易懂的概念：Hash 地址与组件之间的对应关系。
   #号后面写地址表示锚点: 就是当前页面的指定位置

  //a标签中的代码：
    <a href="#demo1">跳转1</a>
    <a href="#node2">跳转2</a>
    <a href="#node3">跳转3</a>

比如 localhost:8080/#/home,此时ur的哈希值就是#/home,location对象有获得哈希值的方法，可以通过监听动态组件，然后让不同的哈希值时展示对应的页面，也能模拟简单的路由效果。

4. 前端路由的工作方式
   ① 用户点击了页面上的路由链接
   ② 导致了 URL 地址栏中的 Hash 值发生了变化
   ③ 前端路由监听了到 Hash 地址的变化
   ④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
   
   结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

5. 实现简易的前端路由

vue-router的基本使用

1. 什么是 vue-router
   vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
   vue-router 的官方文档地址：https://router.vuejs/zh/

2. vue-router 安装和配置的步骤
   ① 安装 vue-router 包
   ② 创建路由模块
   ③ 导入并挂载路由模块
   ④ 声明路由链接和占位符

2.1 在项目中安装 vue-router
在 vue2 的项目中，安装 vue-router 的命令如下：

2.2 创建路由模块
在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：
index.js这个文件很常用，在router文件夹下建立，是我们使用路由的实际方式。

2.3 导入并挂载路由模块
在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

2.4 声明路由链接和占位符
在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符
<router-link>标签其实就是我们使用路由时候的a标签，在使用路由时推荐使用 <router-link>而不是a标签，<router-view>仅仅就是个占位符，写了它组件就可以在它那里展示了。

3. 声明路由的匹配规则
   在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：
   要写在路由实例化时的构造函数里，固定写法：
   大括号里写routes数组，然后再写 哈希地址和组件的对应规则，此时的哈希地址要省略#号
   

vue-router 的常见用法

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
如下，就能让网站默认访问home了，原本是默认访问#/，重定向跳转了。

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。
就是我用路由已经展示了某个组件了，但是这个组件里面我又会放置路由来在此组件中再展示组件，形成了嵌套关系，开始套娃了。

实现嵌套路由：
3.1 声明子路由链接和子路由占位符
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下

声明了路由链接和占位符以后，最重要的是指明路由的对应规则：

3.2 通过 children 属性声明子路由规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：
要在父路由规则中使用children数组，书写子路由规则，注意path中是不加/的，和父不一样
再导入相应的子子组件即可。

如果我么们在展示about组件的时候，想要一点击默认就展示其中的子组件tab1，那么可以使用重定向来实现：

还有一种实现方式叫做默认子路由：如果path值为空字符串，此路由规则就会默认展示，跟跳转不一样的是此时的url地址栏后面是空而不是/tab1

动态路由匹配

现在传过来的链接，movie后面是id的值，根据不同的id放不同的电影，但是用的组件都是movie组件：

4.1 动态路由的概念
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：

这个使用 ：冒号来动态的进行匹配了，：可以对应 1、2、3等等数值，没必要非要起名为id，这个值将可以在movie组件中可以得到

4.2 $route.params 参数对象

怎么得到呢，在movie组件中，this对象（组件本身）有$route属性，其中的params对象就有对应的参数值，其名字和自己起的参数名对应：

使用 $route.param.mid即可取出参数值

但是有更简单的方式接收该参数：开启props传参，在规则中指定props为true，然后再movie组件中增加props数组，写入mid，就可以直接用了

?后面的参数叫查询参数，需要使用this.$route.query来访问
在this.route中，path只是路径部分，fullpath是完整的地址

声明式导航&编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：
⚫ 普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航
在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如：
⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

5.1 vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：
① this.$router.push(‘hash 地址’)
⚫ 跳转到指定 hash 地址，并增加一条历史记录
② this.$router.replace(‘hash 地址’)
⚫ 跳转到指定的 hash 地址，并替换掉当前的历史记录

③ this.$router.go(数值 n)
⚫ 实现导航历史前进、后退

注意这跟前面的route不一样，这里是$router属性

5.2 $router.push
调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：

5.3 $router.replace
调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。
push 和 replace 的区别：
⚫ push 会增加一条历史记录
⚫ replace 不会增加历史记录，而是替换掉当前的历史记录

5.4 $router.go
调用 this.$router.go() 方法，可以在浏览历史中前进和后退。示例代码如下：

5.5 $router.go 的简化用法
在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：
① $router.back()
⚫ 在历史记录中，后退到上一个页面
② $router.forward()
⚫ 在历史记录中，前进到下一个页面

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

6.1 全局前置守卫
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

这里调用beforeEach方法，里面的形参有三个回调函数，回调函数中有三个形参，格式为：
to是将访问的路由信息对象，from是将要离开的路由信息对象，next是放行的函数，一定要有

6.3 next 函数的 3 种调用方式
参考示意图，分析 next 函数的 3 种调用方式最终导致的结果

控制后台主页访问权限，访问main时要验证token，其他的可以直接访问：

本文标签： 插槽路由全套组件笔记