Vue2(三)：自定义指令、插槽、路由

// App.vue
<template>
  <div id="app">
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
  </div>
</template>

<script>
export default {
  // mouted(){
  //   this.$refs.inp.focus()
  // }
  // 局部注册
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style></style>

javascript 复制代码

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 全局注册
// Vue.directive('focus', {
//   inserted(el) {
//     el.focus()
//   }
// })

new Vue({
  render: h => h(App),
}).$mount('#app')

1.2 指令的值

指令是可以传值的。手动修改color时，会触发update函数。

inserted 提供的是元素被添加到页面中时的逻辑；update 钩子是指令的值修改的时候触发，提供值变化后，dom更新的逻辑。

1.3 v-loading指令封装

本质loading效果就是一个蒙层，盖在了盒子上

2、插槽

插槽分类：默认插槽（组件内定制一处结构）和具名插槽（组件内定制多处结构）。

作用域插槽是插槽的一个传参语法。

2.1 默认插槽

作用：让组件内部的一些结构支持自定义。

组件封装时，需要定制的内容使用 slot 占位，使用该组件时定制的内容会被填在slot的位置。

2.2 后备内容（默认值）

封装组件时，可以为预留的 '<slot>'插槽提供的后备内容

2.3 具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制。使用多个slot占位，使用name属性区分。

v-slot:插槽名可以简化成 #插槽名

2.4 作用域插槽

定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

3、路由（入门）

3.1 单页应用程序 SPA

SEO：搜索引擎优化

单页面应用程序，开发效率高、性能高、用户体验好，是因为：页面按需更新（要明确访问路径和组件的对应关系 --- 由路由确定）。

路由概念

Vue中路由：路径和组件的映射关系

根据路由就可以知道不同路径的，应该匹配渲染哪个组件

3.2 VueRouter的基本使用

作用：修改地址栏路径时，切换显示匹配的组件

VueRouter 使用5+2 步

下载VueRouter 模块到当前工程，版本3.6.5：npm install vue-router@3.6.5 --save

在main.js中引入
javascript 复制代码
import VueRouter from 'vue-router'
安装注册 Vue.use(Vue插件都需要安装注册)
javascript 复制代码
Vue.use(VueRouter)
创建路由对象
javascript 复制代码
const router = new VueRouter()
注入到new Vue实例中，建立关联
javascript 复制代码
new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

2个核心步骤：

创建需要的组件（views目录），配置路由规则（路径和组件的对应规则）

2.配置导航，配置路由出口（路径匹配的组件显示的位置router-view，路径要和上面地址栏路径一致）

组件分为：页面组件（在views中，配合路由使用）和复用组件（在components中）（本质无区别）

4、路由进阶

4.1 路由模块封装

路径可以使用绝对路径，使用@

4.2 声明式导航router-link

vue-router提供一个全局组件router-link（取代a标签）

当点击router-link的标签自带激活时的类名router-link-active 和router-link-exact-active

自定义高亮类名

跳转传参

两种方式：查询参数传参（适合传多个参数）和动态路由传参。

查询参数传参：

语法格式：
javascript 复制代码
    to="/path?参数名=值"
对应页面组件接收传递过来的值
javascript 复制代码
    $route.query.参数名
在created中，获取路由：this.$route.query.参数名

动态路由传参：

配置动态路由(path:'/search/:参数')

配置动态路由
javascript 复制代码
    to="/path?参数名"
对应页面组件接收传递过来的值
javascript 复制代码
    $route.params.参数名
注意：