Vue - 5（ 16000 字 Vue2 入门级教程）

news2025/5/26 11:05:06

一：Vue 初阶

1.1 组件自定义事件

在 Vue 中，组件间通过自定义事件进行通信是一种常见的模式。自定义事件允许子组件向父组件发送消息，也可以在组件内部进行事件的绑定、触发和解绑。让我们详细讲解这些知识点。

1.1.1 组件自定义事件

在 Vue 中，自定义事件是指子组件通过 $emit 方法触发，父组件通过 v-on 监听并响应的一种事件机制，一种组件间通信的方式，适用于：子组件 ===> 父组件

1.1.1.1触发自定义事件

在子组件中，使用 $emit 方法来触发自定义事件。例如，Student 组件中的 sendStudentlName 方法通过 $emit 触发了一个名为 atguigu 的自定义事件，并传递了一些参数。

sendStudentlName(){
    this.$emit('atguigu', this.name, 666, 888, 900)
}
1.1.1.2. 监听自定义事件

在父组件中，通过 v-on 或简写 @ 来监听子组件触发的自定义事件。例如，假设 App 父组件包含了一个 <Student> 子组件，并监听了子组的 atguigu 事件。

<template>
    <div>
        <Student @atguigu="handleAtguiguEvent" />//触发了名为 "atguigu" 的自定义事件时，父组件将调用名为 "handleAtguiguEvent" 的方法来处理该事件。
    </div>
</template<script>
export default {
    methods: {
        handleAtguiguEvent(name, num1, num2, num3) {
            console.log('Received event from Student component:', name, num1, num2, num3);
        }
    }
}
</script>

组件上也可以绑定原生DOM事件，需要使用native修饰符

1.1.1.3. 解绑自定义事件

Vue 提供了 $off 方法用于解绑自定义事件。

  • 解绑特定的事件

    在子组件中可以使用 this.$off('event-name') 解绑特定的事件。

    unbind(){
    this.$off('atguigu'); // 解绑单个事件
}

  • 解绑多个事件

    可以同时解绑多个事件。

    unbind(){
    this.$off(['atguigu', 'demo']); // 解绑多个事件
}

  • 解绑所有事件

    如果不传入参数，则会解绑所有自定义事件。

    unbind(){
    this.$off(); // 解绑所有的自定义事件
}

1.1.2 组件销毁与事件失效

Vue 组件销毁时，其所有自定义事件也会失效。在 Student 组件中，使用 this.$destroy() 方法可以销毁当前组件实例，这将导致该组件的所有自定义事件失效，即无法再触发和响应。

death(){
    this.$destroy(); // 销毁当前Student组件的实例，销毁后所有自定义事件失效。
}

完整代码示例

下面是整合了这些知识点的完整示例：

<template>
  <div>
    <Student @atguigu="handleAtguiguEvent" />
    <School :getSchoolName="handleSchoolName" />
  </div>
</template>

<script>
import Student from './Student.vue';
import School from './School.vue';

export default {
  components: {
    Student,
    School
  },
  methods: {
    handleAtguiguEvent(name, num1, num2, num3) {
      console.log('Received event from Student component:', name, num1, num2, num3);
    },
    handleSchoolName(schoolName) {
      console.log('Received school name from School component:', schoolName);
    }
  }
}
</script>

在这个示例中，<App> 父组件中引入了 <Student> 和 <School> 子组件，分别监听了它们触发的自定义事件。当子组件触发对应的事件时，父组件中的方法会被调用，实现了组件间的通信。

1.2 全局事件总线

全局事件总线是 一种组件间通信的方式，适用于任意组件间通信

在这里插入图片描述

在Vue中，事件总线是一种通信机制，允许不同组件之间进行通信。Vue实例提供了一个事件系统，可以通过$on方法监听事件，通过$emit方法触发事件，通过$off方法解绑事件监听器。

首先，在Vue实例上创建一个事件总线：

const bus = new Vue();

// 将事件总线挂载到Vue原型上，这样所有组件都可以访问到它
Vue.prototype.$bus = bus;

然后，在任何组件中，你可以通过$bus.$on来监听事件，通过$bus.$emit来触发事件：

// 在组件A中监听事件
this.$bus.$on('my-event', (data) => {
  console.log('Received data:', data);
});

// 在组件B中触发事件
this.$bus.$emit('my-event', { message: 'Hello world!' });

在以上示例中，组件A监听了my-event事件，组件B触发了my-event事件，并传递了一个包含消息的对象。当事件被触发时，组件A中的回调函数会被调用，打印出接收到的数据。

要解绑事件监听器，可以使用$off方法。在组件销毁或不需要监听事件时，最好手动解绑事件，以避免内存泄漏。

// 在组件销毁时解绑事件监听器
beforeDestroy() {
  this.$bus.$off('my-event');
}

通过以上方式，你可以在Vue中实现事件总线的功能，并且可以确保在不需要时正确地解绑事件监听器。

1.3 消息订阅与发布

消息订阅与发布（Publish/Subscribe，Pub/Sub）是一种常用的软件架构模式，用于组件间通信

在消息订阅与发布模式中，有以下几个重要的角色和概念：

  • 发布者（Publisher）：负责发送消息。
  • 订阅者（Subscriber）：接收和处理特定类型的消息。
  • 主题（Topic）：用于定义消息的类型或名称，订阅者可以根据主题进行订阅。
  • 消息（Message）：发布者发送的数据或事件。

1.3.1 详细步骤

  1. 安装 pubsub-js

    首先，通过 npm i pubsub-js 安装 PubSub.js，这是一个常用的 JavaScript 发布/订阅库。

  2. 引入并使用

    在需要使用的文件中，通过 import pubsub from 'pubsub-js' 导入 PubSub.js。

  3. 消息订阅

    订阅者（例如组件 A）可以通过 pubsub.subscribe('topicName', callback) 来订阅特定的主题（topic）。当发布者发布与该主题相关的消息时，订阅者的回调函数（callback）将被调用并接收到消息。

    示例代码：

    methods: {
  demo(data) {
    // 处理接收到的数据
    console.log('Received data:', data);
  }
},
mounted() {
  // 订阅主题 'xxx'，并指定回调函数为 this.demo
  this.pid = pubsub.subscribe('xxx', this.demo);
}

  4. 消息发布

    发布者可以通过 pubsub.publish('topicName', data) 来发布特定主题的消息，并将数据（data）传递给所有订阅了该主题的订阅者。

    示例代码：

    // 在某处发布名为 'xxx' 的主题，并发送数据
pubsub.publish('xxx', { message: 'Hello!' });

  5. 取消订阅

    为了避免内存泄漏或意外的消息处理，建议在组件销毁前取消订阅。通过 pubsub.unsubscribe(pid) 取消之前设置的订阅。

    示例代码：

    beforeDestroy() {
  // 在组件销毁前取消订阅
  pubsub.unsubscribe(this.pid);
}

示例解释

以上示例展示了如何在 Vue.js 组件中使用 PubSub.js 实现消息订阅与发布：

  • 当组件 A 的 mounted 钩子函数执行时，它订阅了名为 ‘xxx’ 的主题，并指定了 this.demo 作为回调函数。
  • 在其他任何地方（可能是另一个组件或模块），通过 pubsub.publish('xxx', data) 发布 ‘xxx’ 主题的消息，并传递数据 data。
  • 一旦消息发布，订阅者（即组件 A）的 demo 方法将被调用，接收并处理消息中的数据。
  • 在组件 A 销毁之前，通过 beforeDestroy 钩子取消订阅，以确保在组件销毁后不再接收或处理来自该主题的消息。

这种模式的优势在于，它使不同模块之间的通信更加松散耦合，模块间不直接依赖于彼此，而是通过订阅和发布消息进行通信，从而提高了系统的可扩展性和灵活性。

1.4 nextTick

在 Vue.js 中，this.$nextTick 是一个异步方法，它接收一个回调函数作为参数。它的作用是在下一次 DOM 更新周期结束后执行指定的回调函数。

通常情况下，Vue 在更新 DOM 时是异步执行的，也就是说当你修改了数据后，Vue 并不会立即更新 DOM，而是将更新放入一个队列中，在适当的时机统一进行 DOM 的更新。而this.$nextTick 就提供了一种方式，让你能够在 Vue 完成 DOM 更新后执行一些操作。

举个例子，在你修改了某个数据后，可能需要获取到更新后的 DOM 元素的一些信息或者一些 DOM 操作，但是直接在数据修改后获取可能会得到更新前的 DOM 状态，这时候就可以利用this.$nextTick 来确保你的操作在下一次 DOM 更新后执行。

下面是一个示例代码：

// 在某个方法中修改数据
changeData() {
  this.message = 'Updated message'; // 修改数据
  this.$nextTick(() => {
    // 在下一次 DOM 更新后执行的操作
    const element = document.getElementById('someElement');
    console.log('Updated DOM:', element.innerText);
  });
}

在上面的代码中，changeData 方法中先修改了 message 的值，然后在this.$nextTick 方法中传入了一个回调函数。这个回调函数会在下一次 DOM 更新后被调用，在这个时候，你可以放心地获取到更新后的 DOM 状态。

需要注意的是，this.$nextTick 方法是异步执行的，所以不能保证回调函数的执行顺序。如果需要确保多个回调函数的执行顺序，可以在每个回调函数中再次使用 this.$nextTick。

1.5 Vue封装的过度与动画

过渡与动画的作用是让元素在插入、更新或移除时，能够以平滑的动画效果呈现出来，增强用户体验。通过 Vue 提供的 <transition> 组件，你可以轻松地实现元素的渡效果和动画效果。

1.5.1 详细步骤

  1. 准备样式

    首先，你需要准备好过渡或动画效果所需的样式，其中包括：

    • 元素进入时的样式类名：
      • v-enter：表示元素进入时的起点状态。
      • v-enter-active：表示元素进入过程中的状态。
      • v-enter-to：表示元素进入时的终点状态。
    • 元素离开时的样式类名：
      • v-leave：表示元素离开时的起点状态。
      • v-leave-active：表示元素离开过程中的状态。
      • v-leave-to：表示元素离开时的终点状态。

  2. 使用 <transition>

    将需要过渡或动画的元素使用 <transition> 包裹起来，并配置 name 属性来指定样式类名的前缀。

    <transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

    在上面的例子中，name="hello" 表示过渡或动画效果所需的样式类名的前缀为 hello。

  3. 备注

    • 如果需要对多个元素同时进行过渡或动画，可以使用 <transition-group>，并为每个元素指定唯一的 key 值。
    • 每个过渡或动画效果都会在适当的时机自动添加和移除对应的样式类名，从而实现动态的过渡效果。

示例代码

假设我们要实现一个元素在显示和隐藏时的淡入淡出效果：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <transition name="fade">
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上面的例子中，当点击按钮时，isShow 的值会切换，从而触发元素的显示和隐藏。同时，<transition> 标签中的 name="fade" 属性表示使用了名为 fade 的样式类名前缀。在样式部分，定义了 .fade-enter-active、.fade-leave-active、.fade-enter 和 .fade-leave-to 这几个类，来实现淡入淡出的过渡效果。

1.6 插槽

在 Vue 中，插槽是一种组件间通信的机制，允许父组件向子组件传递 HTML 结构或数据，并在子组件中进行展示或处理。Vue 中的插槽分为默认插槽、具名插槽和作用域插槽三种类型，用于不同的场景。

  1. 默认插槽：

默认插槽是最简单的一种插槽形式。父组件可以在子组件的标签中插入 HTML 结构或文内容，而子组件通过 <slot> 标签定义插槽的位置，用来展示父组件传递过来的内容。

示例代码：

<!-- 父组件 -->
<Category>
    <div>HTML 结构1</div>
</Category>

<!-- 子组件 -->
<template>
    <div>
        <slot>插槽默认内容...</slot>
    </div>
</template>
  1. 具名插槽：

具名插槽允许父组件将内容传递给子组件的指定位置，可以同时存在多个具名插槽。在父组件中，通过 slot 属性指定插槽的名称；在子组件中，通过 <slot> 标签的 name 属性匹配对应的插槽名称。

示例代码：

<!-- 父组件 -->
<Category>
    <template slot="center">
        <div>HTML 结构1</div>
    </template>
    <template v-slot:footer>
        <div>HTML 结构2</div>
    </template>
</Category>

<!-- 子组件 -->
<template>
    <div>
        <slot name="center">插槽默认内容...</slot>
        <slot name="footer">插槽默认内容...</slot>
    </div>
</template>
  1. 作用域插槽：

作用域插槽允许父组件向子组件传递数据，但根据数据生成的结构由子组件的使用者（父组件）决定。在父组件中，通过 <template> 标签的 scope 或 slot-scope 属性声明作用域变量；在子组件中，通过 <slot> 标签的 name 属性接收作用域变量，并根据数据结构进行渲染。

示例代码：

<!-- 父组件 -->
<Category>
    <template scope="scopeData">
        <ul>
            <li v-for="g in scopeData.games" :key="g">{{ g }}</li>
        </ul>
    </template>
</Category>

<!-- 子组件 -->
<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default {
    name: 'Category',
    data() {
        return {
            games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']
        }
    },
}
</script>

通过插槽机制，父组件和子组件之间可以实现更灵活的交互，使得组件的复用性和扩展性得到了增强。

二： Vuex

在 Vue 中，Vuex 是一种集中式状态管理工具，用于管理应用中的共享状态。它适用于需要多个组件共享数据的场景，可以让组件之间更方便地进行通信和状态管理。

2.1 Vuex 基础

Vuex 将应用的共享状态抽取出来，以一个全局单例模式管理。它包含了以下几个核心概念：

  1. State（状态）：即应用中需要共享的数据，存储在 Vuex 的状态树中，可以通过 $store.state 访问。

  2. Getters（获取器）：用于从状态树中派生出一些状态，类似于计算属性，可以通过 $store.getters 访问。

  3. Mutations（变更）：提交 mutation 是唯一改变状态的方式，每个 mutation 都有一个字符串类型的事件类型和一个回调函数，通过 $store.commit 提交。

  4. Actions（动作）：类似于 mutations，但是可以提交异步操作，通过 $store.dispatch 分发。

  5. Modules（模块）：允许将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。

在这里插入图片描述

何时使用？

当应用中存在多个组件需要共享状态时，可以考虑使用 Vuex。它可以帮助管理这些共享状态，使得组件之间的通信更加简单明了。

搭建 Vuex 环境

  1. 创建文件：src/store/index.js

    // 引入 Vue 核心库
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 应用 Vuex 插件
Vue.use(Vuex)

// 准备 actions 对象——响应组件中用户的动作
const actions = {}
// 准备 mutations 对象——修改 state 中的数据
const mutations = {}
// 准备 state 对象——保存具体的数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

  2. 在 main.js 中创建 Vue 实例时传入 store 配置项

    // 引入 store
import store from './store'

// 创建 Vue 实例
new Vue({
    el: '#app',
    render: h => h(App),
    store
})

基本使用

  1. 初始化数据、配置 actions、配置 mutations，操作文件 store.js

    // 引入 Vue 核心库
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 引用 Vuex
Vue.use(Vuex)

const actions = {
    // 响应组件中加的动作
    jia(context, value) {
        context.commit('JIA', value)
    },
}

const mutations = {
    // 执行加
    JIA(state, value) {
        state.sum += value
    }
}

// 初始化数据
const state = {
    sum: 0
}

// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

  2. 组件中读取 Vuex 中的数据：$store.state.sum

  3. 组件中修改 Vuex 中的数据：$store.dispatch('action中的方法名', 数据) 或 $store.commit('mutations中的方法名', 数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写 dispatch，直接编写 commit。

2.2 Getter 和 4 个 Map方法

2.2.1 Getter 方法

在 Vuex 中，Getter 方法用于从 store 中获取状态，并可以对获取的进行一些加工处理。Getter 方法可以看作 store 的计算属性，当需要从 store 中派生出一些状态时，可以使用 Getter。

使用方式

在 Vuex 的 store 中，通过配置 getters 对象来定义 Getter 方法。Getter 方法收 state 作为第一个参数，可以通过 $store.getters 访问。

示例代码：

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    sum: 0
}

const getters = {
    // Getter 方法：计算 sum 的十倍
    bigSum(state) {
        return state.sum * 10
    }
}

export default new Vuex.Store({
    state,
    getters
})

在组件中，可以通过 $store.getters.bigSum 来获取并使用这个 Getter 方法返回的值。

<!-- MyComponent.vue -->

<template>
  <div>
    <p>Sum: {{ $store.state.sum }}</p>
    <p>Big Sum: {{ $store.getters.bigSum }}</p>
  </div>
</template>

<script>
export {
  // ...
}
</script>

2.2.2 mapState、mapGetters、mapActions、mapMutations 方法

这些方法是 Vuex 提供的辅助函数，可以简化在组件中与 Vuex 进行交互的代码。它们可以帮助将 Vuex 中的 state、getters、actions 和 mutations 映射到组件的计算属性或方法中。

2.2.2.1 mapState 方法

用于帮助我们将 Vuex 中的 state 映射为组件的计算属性。

import { mapState } from 'vuex'

export default {
  computed: {
    // 将 state 中的 sum 映射为计算属性 sum
    ...mapState(['sum'])
  }
}
2.2.2.2 mapGetters 方法

用于帮助我们将 Vuex 中的 getters 映射为组件的计算属性。

import { mapGetters } from 'vuex'

export default {
  computed: {
    // 将 getters 中的 bigSum 映射为计算属性 bigSum
    ...mapGetters(['bigSum'])
  }
}
2.2.2.3 mapActions 方法

用于帮助我们将 Vuex 中的 actions 映射为组件的方法。

import { mapActions } from 'vuex'

export default {
  methods: {
    // 将 actions 中的 increment 映射为组件的方法 increment
    ...mapActions(['increment'])
  }
}
2.2.2.4 mapMutations 方法

用于帮助我们将 Vuex 中的 mutations 映射为组件的方法。

import { mapMutations } from 'vuex'

export default {
  methods: {
    // 将 mutations 中的 increment 映射为组件的方法 increment
    ...mapMutations(['increment'])
  }
}

这些辅助函数使得在组件中使用 Vuex 更加简洁和便捷，可以直接通过映射后的计算属性或方法访问 Vuex 中的状态和操作。

2.3 模块化+命名空间

在 Vue 中，模块化和命名空间是为了更好地组织和管理 Vuex 中的状态、操作和数据而引入的概念。

2.3.1 模块化

模块化是指将 Vuex 的 store 拆为多个模块，每个模块可以包含自己的 state、getters、mutations 和 actions。这样做的目的是将大型的 Vuex 应用拆分为更小、更易于维护的模块，每个模块可以专注于处理特定领域的状态和操作，提高代码的可读性和可维护性。

在 Vuex 中，可以通过在 store 的 modules 选项中注册模块来实现模块化示例代码：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

在组件中使用模化后的 Vuex，需要在读取 state、getters、dispatch actions 和 commit mutations 时指定所属的模块。

2.3.2 命名空间

命名空间是模块化之后的一个概念，它用于区分不同模块中的 state、getters、mutations 和 actions，避免命名冲突。在使用命名空间之前，Vuex 中的所有模块都是在全局命名空间下的，容易造成命名冲突和混乱。

开启命名空间后，每个模块的 state、getters、mutations 和 actions 将只能在自己的命名空间下访问，需要通过模块名来访问。

在 Vuex 中，可以通过在模块配置中设置 namespaced: true 来开启命名空间。

示例代码：

const moduleA = {
  namespaced: true,
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    moduleA
  }
})

在组件中访问命名空间模块的 state、getters、dispatch actions 和 commit mutations 时，需要在调用时指定所属的模块。

// 访问 state
this.$store.state.moduleA.stateName

// 访问 getters
this.$store.getters['moduleA/getterName']

// 调用 actions
this.$store.dispatch('moduleA/actionName', payload)

// 提交 mutations
this.$store.commit('moduleA/mutationName', payload)

通过模块化和命名空间，可以更好地组织和管理 Vuex 中的状态和操作，提高代码的可维护性和可读性，同时避免了命名冲突和混乱。

2.4 路由

在Vue中，路由（route）是指将不同的路径映射到相应的组件上的一种机制。它的作用是实现单页应用（SPA）的页面跳转和管理，使得在页面切换时不需要重新加载整个页面，而是通过动态加载组件来实现页面的更新。

2.4.1 基本使用

  1. 安装vue-router：首先需要安装 Vue Router 插件，可以通过 npm 命令进行安装：
npm install vue-router
  1. 应用插件：在 Vue 项目中，需要在入口文件（通常是 main.js）中使用 Vue.use() 来应用 Vue Router 插件：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
  1. 编写路由配置项：创建一个Router 实例，并配置路由规则，其中每个路由规则由路径（path）和对应组件（component）组成：
import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

export default router
  1. 实现页面切换：在页面中使用 <router-link> 组件来实现页面切换，其中 to 属性指定目标路径：
  <div>
    <router-link to="/about">About</router-link>
    <router-link to="/home">Home</router-link>
  </div>
</template>
  1. 指定展示位置：使用 <router-view> 组件来指定路由组件渲染的位置：
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

注意点

  1. 组件存放位置：通常将路由组件存放在 pages 文件夹，一般组件存放在 components 文件夹。
  2. 路由组件销毁：通过页面切换隐藏的路由组件默认是被销毁的，需要时再挂载。
  3. ** r o u t e 属性 ∗ ∗ ：每个组件都有自己的 ‘ route 属性**：每个组件都有自己的 ` route属性∗∗：每个组件都有自己的‘route` 属性，存储着自己的路由信息。
  4. ** r o u t e r 属性 ∗ ∗ ：整个应用只有一个 r o u t e r ，可以通过组件的 ‘ router 属性**：整个应用只有一个 router，可以通过组件的 ` router属性∗∗：整个应用只有一个router，可以通过组件的‘router` 属性获取到。

2.4.2 多级路由

  1. 配置多级路由规则：使用 children 配置项来实现多级路由：
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News
        },
        {
          path: 'message',
          component: Message
        }
      ]
    }
  ]
})
  1. 跳转：在 <router-link> 中指定完整路径进行跳转：
<router-link to="/home/news">News</router-link>

2.4.3 路由的 query 参数

  1. 传递参数：通过 <router-link> 的 to 属性传递参数，可以使用字符串或对象写法：
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
  1. 接收参数：在目标组件中通过 $route.query 获取传递的参数：
$route.query.id
$route.query.title

2.4.4 命名路由（Named Routes）：

通过给路由命名，可以在路由跳转时使用这个名字来简化跳转路径。具体来说，就是在路由配置中给每个路由项添加一个名字（name），然后在跳转时可以直接使用这个名字来指定跳转目标。

{
  name: 'hello',
  path: '/welcome',
  component: Hello
}

2.4.5 路由的params参数：

路由的params参数允许在路由之间传递数据，通常用于传递动态的路径参数。我们可以在路由配置中使用占位符来声明接收params参数，然后在跳转时传递参数。

{
  name: 'xiangqing',
  path: 'detail/:id/:title',
  component: Detail
}

2.4.6 路由的props配置：

路由的props配置用于让路由组件更方便地接收参数。我们可以通过props配置项，将路由收到的params参数传递给组件，以便组件直接使用，而无需在组件中通过$route来获取。

{
  name: 'xiangqing',
  path: 'detail/:id',
  component: Detail,
  props: true // 将路由收到的所有params参数传递给Detail组件
}

2.4.7 <router-link>的replace属性：

<router-link>是Vue Router提供的用于生成路由链接的组件，它可以方便地生成带有正确路径的链接。replace属性用于控制路由跳转时操作浏览器历史记录的模式，可以选择替换当前记录而不是追加历史记录。

<router-link replace to="/news">News</router-link>

2.4.8 编程式路由导航：

除了通过<router-link>实现路由跳转外，还可以使用编程式路由导航来实现，这样可以在代码中更灵活地控制路由的跳转。

// 使用 $router.push() 方法进行路由跳转
this.$router.push({
  name: 'xiangqing',
  params: {
    id: xxx,
    title: xxx
  }
})

2.4.9 缓存路由组件：

有时候我们希望某些路由组件在切换时不被销毁，而是保持挂载状态，以便在切换回来时能够保留之前的状态。这时可以使用<keep-alive>组件来包裹<router-view>，并通过include属性指定需要缓存的组件。

<keep-alive include="News">
  <router-view></router-view>
</keep-alive>

通过以上路由的用法，我们可以更灵活地管理应用的页面跳转和参数传递，实现更加丰富的单页面应用功能。

2.4.10 路由两个新的生命周期钩子

在Vue Router中，有两个新的生命周期钩子，别是activated和deactivated。它们是路由组件所独有的钩子，用于捕获路由组件的激活状态。

  1. activated: 当路由组件被激活时触发。你可以在这个钩子中执行特定的操作，例如数据加载或组件初始化。

  2. deactivated: 当路由组件失活时触发。你可以在这个钩子中执行清理操作或者取消订阅。

export default {
 () {
    // 路由组件被激活时执行的操作
  },
  deactivated() {
    // 路由组件失活时执行的清理操作
  }
}

2.4.11 路由守卫

路由守卫用于对路由进行权限控制和导航控制。在Vue Router中，路由守卫分为全局守卫、独享守卫和组件内守卫。

  1. 全局守卫：

    • 全局前置守卫 (beforeEach)：在每次路由切换前执行的操作，用于进行全局的权限控制或导航控制。

    • 全局后置守卫 (afterEach)：在每次路由切换后执行的操作，通常用于修改页面的标题或执行一些全局的清理操作。

router.beforeEach((to, from, next) => {
  // 在路由切换前执行的权限控制或导航控制
});

router.afterEach((to, from) => {
  // 在路由切换后执行的操作，例如修改页面标题
});

  1. 独享守卫

    独享守卫是直接在路由配置中定义的守卫，针对特定的路由进行权限控制或导航控制。

const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter(to, from, next) {
        // 在进入特定路由前执行的权限控制或导航控制
      }
    }
  ]
});

  1. 组件内守卫：

    组件内守卫是直接在组件内部定义的守卫，用于特定组件的进入和离开时执行的操作。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入组件前执行的操作
  },
  beforeRouteLeave(to, from, next) {
    // 在离开组件前执行的操作
  }
}

2.4.12 路由器的两种工作模式

在Vue Router中，有两种常见的路由器工作模式：hash模式和history模式。

  1. hash模式：

    • 地址中永远带着#号，不够美观。
    • 不会将hash值包含在HTTP请求中，因此不会影响到服务器端。
    • 兼容性较好，但在某些第三方应用中可能会被标记为不合法。
const router = new VueRouter({
  mode: 'hash',
  routes: [...]
});

  1. history模式：

    • 地址干净美观，不含#号。
    • 需要后端服务器支持，以解决刷新页面服务端404的问题。
    • 兼容性较hash模式略差，但在现代浏览器中已得到广泛支持。
const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

这些路由概念和功能在Vue.js应用中起着重要作用，可以帮助你管理应用的导航、权限控制和页面展示。

三 ： Vue UI 组件库

Vue UI 组件库是为了方便开发者在Vue.js项目中使用的一套UI组件集合，包括Element UI和Vant。这些组件库提供了丰富的UI组件，可以帮助开发者快速搭建用户界面，提升开发效率。

3.1 Element UI （ PC端 ）

Element UI是一个基于Vue.js 2.0的组件库，提供了一系列的UI组件，包括按钮、表单、弹窗、导航等等，覆盖了大部分常用的UI组件。使用Element UI可以快速搭建出美观、易用的用户界面。

基本使用

  1. 安装Element UI：可以通过npm或者yarn进行安装。
 npm install element-ui

或者

yarn add element-ui
  1. 在项目中使用Element UI：在Vue项目的入口文件（如main.js）中引入Element UI的样式和组件。
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';

 Vue.use(ElementUI);
  1. 在Vue组件中使用Element UI组件：直接在组件的模板中使用Element UI提供的组件即可。
 <template>
   <el-button>按钮</el-button>
 </template>

 <script>
 export default {
   name: 'MyComponent'
 };
 </script>

按需引入
如果你只想使用部分Element UI组件而不是全部引入，可以使用babel-plugin-component这个babel插件来按需引入。

  1. 安装babel-plugin-component：
 npm install babel-plugin-component -D
  1. 修改.babelrc文件，在plugins中添加babel-plugin-component配置：
 {
   "plugins": [
     ["component", {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-chalk"
     }]
   ]
 }
  1. 在组件中按需引入需要的Element UI组件：
 import { Button } from 'element-ui';

 export default {
   components: {
     'el-button': Button
   }
 };

3.2 Vant （ 移动端 ）

Vant是有赞开源的一个移动端Vue组件库，提供了一系列的移动端UI组件，包括按钮、表单、弹窗、导航等等，能够帮助开发者快速搭建移动端应用。

基本使用

  1. 安装Vant：可以通过npm或者yarn进行安装。
 npm install vant

或者

 yarn add vant
  1. 在项目中使用Vant：在Vue项目的入口文件（如main.js）中引入Vant的样式和组件。
 import Vue from 'vue';
 import Vant from 'vant';
 import 'vant/lib/index.css';

 Vue.use(Vant);
  1. 在Vue组件中使用Vant组件：直接在组件的模板中使用Vant提供的组件即可。
 <template>
   <van-button>按钮</van-button>
 </template>

 <script>
 export default {
   name: 'MyComponent'
 };
 </script>

按需引入
如果你只想使用部分Vant组件而不是全部引入，可以使用babel-plugin-import这个babel插件来按需引入。

  1. 安装babel-plugin-import：
 npm install babel-plugin-import -D
  1. 修改.babelrc文件，在plugins中添加babel-plugin-import配置：
 {
   "plugins": [
     ["import", {
       "libraryName": "vant",
       "libraryDirectory": "es",
       "style": true
     }]
   ]
 }
  1. 在组件中按需引入需要的Vant组件：
 import { Button } from 'vant';

 export default {
   components: {
     'van-button': Button
   }
 };

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1593073.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSS核心样式-02-盒模型属性及扩展应用

CSS核心样式-02-盒模型属性及扩展应用

目录 三、盒模型属性 常见盒模型区域 盒模型图 盒模型五大属性 1. 宽度 width 2. 高度 height 3. 内边距 padding 四值法 三值法 二值法 单值法 案例 4. 边框 border 按照属性值的类型划分为三个单一属性 ①线宽 border-width ②线型 border-style ③边框颜色 bo…
阅读更多...
开源项目one-api的k8s容器化部署（下）-- 部署至k8s

开源项目one-api的k8s容器化部署（下）-- 部署至k8s

一、接着上文 本文讲述如何把上文制作好的docker镜像部署到K8S&#xff0c;会涉及以下部分&#xff1a; 健康检测应用程序的配置应用程序的端口日志路径 二、健康检测 1、健康状态 从官方的docker-compose.yml可以得知其健康检测方法 curl http://localhost:5175/api/statu…
阅读更多...
正则表达式：特殊序列（五）

正则表达式：特殊序列（五）

正则表达式中的特殊序列包括&#xff1a;1. \d&#xff1a;匹配任意数字字符&#xff0c;等同于[0-9]。2. \D&#xff1a;匹配任意非数字字符&#xff0c;等同于[^0-9]。3. \w&#xff1a;匹配任意字母、数字或下划线字符&#xff0c;等同于[A-Za-z0-9_]。4. \W&#xff1a;匹配…
阅读更多...
电路知识分享

电路知识分享

电路 1. 基尔霍夫 KCL 定律 基尔霍夫定律包括电流定律和电压定律 电流定律KCL&#xff1a;在电路中&#xff0c;任何时刻&#xff0c;对任一节点&#xff0c;所有流出节点的支路电流的代数和恒等于零。 电压定律KVL&#xff1a;在集总电路中&#xff0c;任何时刻&#xff0…
阅读更多...
3D场景编辑方法——CustomNeRF

3D场景编辑方法——CustomNeRF

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;3D场景编辑方法——CustomNeRF1、研究背景2、提出方法3、CustomNeRF3.1、整体框架步骤3.2、对特定问题的解决 4、实验结果5、总结…
阅读更多...
支持向量机模型

支持向量机模型

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个支持向量机模型程序,最后打印5个条件分别的影响力。 示例一 为了计算每个条件对一件事情发生的影响力&#xff0c…
阅读更多...
年龄与疾病c++

年龄与疾病c++

题目描述 某医院想统计一下某项疾病的获得与否与年龄是否有关&#xff0c;需要对以前的诊断记录进行整理&#xff0c;按照0-18岁、19-35岁、36-60岁、61以上&#xff08;含61&#xff09;四个年龄段统计的患病人数以及占总患病人数的比例。 输入 共2行&#xff0c;第一行为过…
阅读更多...
JavaSE——常用API进阶二（3/8）-Date、SimpleDateFormat（构造器、常用的方法、用法示例、时间格式的常见符号）

JavaSE——常用API进阶二（3/8）-Date、SimpleDateFormat（构造器、常用的方法、用法示例、时间格式的常见符号）

目录 Date 构造器、常用的方法 用法示例 SimpleDateFormat 构造器、格式化时间的方法 时间格式的常见符号 用法示例 解析字符串时间成为日期对象 接下来会学习JDK8以前传统的日期、时间&#xff0c;以及JDK8开始新增的日期、时间&#xff1b;有部分项目还是有在使用JDK…
阅读更多...
雷霆传奇H5_源码搭建架设_神魔之魔改龙珠2

雷霆传奇H5_源码搭建架设_神魔之魔改龙珠2

本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff01; 一. 效果演示 雷霆传奇H5_源码搭建架设_神魔之魔改龙珠2 联网环境&#xff1a; centos7.6 &#xff0c; 放开所有端口…
阅读更多...
数据治理专家岗位的能力模型

数据治理专家岗位的能力模型

数据治理专家的角色要求其具备全方位的专业素养与技能&#xff0c;不仅要有深厚的业务理解与数据技术功底&#xff0c;还需展现出卓越的领导力、团队协作与沟通能力&#xff0c;以驱动组织内部数据治理工作的高效运行与持续优化。以下是对数据治理专家各项能力的深入解读&#…
阅读更多...
算法题 - 双指针

算法题 - 双指针

目录 125. 验证回文串392. 判断子序列167. 两数之和 Ⅱ - 输入有序数组11. 盛最多的水15. 三数之和 125. 验证回文串 LeetCode_link 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 …
阅读更多...
【问题篇】activiti工作流流程图更新后旧数据问题

【问题篇】activiti工作流流程图更新后旧数据问题

互相学习交流 当我们使用activiti开发工作流时&#xff0c;项目上线后可能修改需求导致修改流程图也是很常见的情况。但是activiti更新流程图后&#xff0c;以前的流程实例并不会也跟着更新&#xff0c;activiti会保存每一份的流程图版本&#xff0c;只有新发起的流程实例才会…
阅读更多...
架构设计-权限系统之通用的权限系统设计方案

架构设计-权限系统之通用的权限系统设计方案

一个系统&#xff0c;如果没有安全控制&#xff0c;是十分危险的&#xff0c;一般安全控制包括身份认证和权限管理。用户访问时&#xff0c;首先需要查看此用户是否是合法用户&#xff0c;然后检查此用户可以对那些资源进行何种操作&#xff0c;最终做到安全访问。身份认证的方…
阅读更多...
spring boot集成logback到mysql 8

spring boot集成logback到mysql 8

spring boot集成logback到mysql 8 依赖数据库准备创建log日志用户&#xff0c;并创建数据库执行建表sql 配置文件bugbug 1&#xff1a;Failed to instantiate type ch.qos.logback.classic.db.DBAppenderbug信息&#xff1a;解决&#xff1a; bug2: DBAppender cannot function…
阅读更多...
开源博客项目Blog .NET Core源码学习（14：App.Hosting项目结构分析-2）

开源博客项目Blog .NET Core源码学习（14：App.Hosting项目结构分析-2）

开源博客项目Blog的前台页面&#xff08;如下图所示&#xff09;的控制器类保存在App.Hosting项目的Controllers文件夹内&#xff0c;页面保存在Views文件夹内&#xff0c;网页中使用的图标、js、css文件等保存在wwwroot文件中。 前台各个页面、Controller文件夹中的控制器类及…
阅读更多...
上位机图像处理和嵌入式模块部署（镜头和相机的选择）

上位机图像处理和嵌入式模块部署（镜头和相机的选择）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在机器视觉当中&#xff0c;除了光源比较重要之外&#xff0c;另外最最重要的就是镜头和相机的选择了。通常来说&#xff0c;镜头是机械和光学装置…
阅读更多...
【算法】分治-快排

【算法】分治-快排

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 前言1. 75. 颜色分类1.1 分析1.2 代码 2. 912. 排序数组2.1 分析2.2 代码 3. 215. 数组中的第K个最大元素3.1 分析3.2 代码 4. LCR 159. 库存管理 III4.1 分析4.2 代码 前言 分治就是分而治之 1. 75. 颜色分类 1.1 分析…
阅读更多...
解决vue3更新chunk包后，点击页面报错

解决vue3更新chunk包后，点击页面报错

出现错误 解决思路 试了好多方法&#xff0c;跳了很多坑&#xff0c;router版本对不上&#xff0c;解决方案不实用。最后我直接捕获异常&#xff0c;刷新页面&#xff0c;解决最快最有效。 // vue-rotuer版本 "vue-router": "^4.0.3"解决方案 在router/…
阅读更多...
（学习日记）2024.04.18：UCOSIII第四十六节：CPU利用率及栈检测统计

（学习日记）2024.04.18：UCOSIII第四十六节：CPU利用率及栈检测统计

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…
阅读更多...
【iOS ARKit】Web 网页中嵌入 AR Quick Look

【iOS ARKit】Web 网页中嵌入 AR Quick Look

在支持 ARKit 的设备上&#xff0c;iOS 12 及以上版本系统中的 Safari浏览器支持 AR Quick Look&#xff0c; 因此可以通过浏览器直接使用3D/AR 的方式展示 Web 页面中的模型文件&#xff0c;目前 Web 版本的AR Quick Look 支持USDZ 格式文件。苹果公司有一个自建的3D模型示例库…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023