vue3 路由的引入和配置
在 Vue 中，router 是一个核心插件，负责管理应用的路由配置，实现单页面应用（SPA）中的页面导航和组件切换，使得开发者能够通过定义路由映射来动态加载和渲染不同的组件，从而构建复杂的用户界面和交互体验。官方网站https://router.vuejs.org/ router的安装npm install vue-router@4 具体的版本会在package.json里体现 路由定义与导出 index.js: import Main from '../view/Main.vue'import Login from '../view/login/login.vue'import { createWebHashHistory, createRouter } from 'vue-router'const routes = [ { path: '/', component: Main }, { path: '/login'...
Vue 中 KeepAlive 的用法全解析
1. 前言在 Vue 开发过程中，我们常常会碰到组件频繁切换的情况。大家都知道，组件每一次切换时的创建与销毁，其实都在消耗着系统资源，这可能会对应用的性能产生影响，甚至让用户体验大打折扣。而 Vue 为我们提供的 KeepAlive 组件，就像是一把优化性能的利器。它能够将那些需要频繁切换的组件实例缓存起来，当再次用到这些组件时，直接从缓存中调取，而不是重新创建，从而显著提升应用的运行效率与响应速度。无论是小型项目还是大型复杂应用，了解并掌握 KeepAlive 的用法，都能帮助我们更好地优化 Vue 应用，让我们的开发工作更加得心应手。接下来，咱们就深入地了解一下它的具体用法。 2. KeepAlive 基本概念与用法KeepAlive 是 Vue 内置的一个组件，其核心作用就是缓存组件实例。在一般的 Vue 应用场景里，比如通过 v - if 或者 v - show 指令切换组件，又或者是在路由切换时的 <router - view> 部分，组件默认是会被销毁然后重新创建的。但 KeepAlive 改变了这种模式。假设我们有 ComponentA 和 Compon...
vue中的请求拦截、响应拦截和全局路由拦截
1. 前言本篇将为 axios 请求库添加请求拦截器、响应拦截器，通过它们，就可以在请求之前，或者请求结束以后定制一些个性化需求。 2. 拦截器关于拦截器的详细文档，可访问官方地址：https://www.axios-http.cn/docs/interceptors ，官方对它的解释是： 在请求或响应被 then 或 catch 处理前拦截它们。 // 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });// 添加响应拦截器axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return respo...
vue中回车或其他键盘按键的事件监听
1.前言很多交互做的好一点的网站，都会有这样的功能，当输入完用户名、密码后，直接敲击回车键就能完成登录了在 Vue 开发里，用户与页面交互举足轻重，键盘输入是常见交互形式。精准监听键盘事件，能提升应用功能与体验，像表单提交时监听回车键，以及在游戏、文本编辑、导航控制等场景对各类按键响应处理，都可让交互更便捷高效。下面，我们深入探究 Vue 中回车及其他常用键盘值的事件监听实现，助力开发者打造更灵活、交互性强的 Vue 应用。 2. 代码实现在你需要添加监听的组件脚本中添加代码： <script setup>// 省略...import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'// 省略...// 按回车键后，执行登录事件function onKeyUp(e) { console.log(e) if (e.key == 'Enter') { onSubmit() }}/...
用vuex实现vue中的内容存储和组件数据共享
介绍与安装介绍Vuex 是 vue 项目中实现大范围数据共享的技术方案。作用：能够方便、高效地实现组件之间的数据共享。传统的父子组件数据传递较复杂，vuex可以更方便的实现多个交互组件之前的数据共享 安装npm install vuex@next --save 使用步骤定义我们在src目录下新建store文件夹，创建index.js，和自己的模块js menu.js，这个例子中是为了实现左侧的导航菜单点击可在右侧头部展示当前菜单的tab页index.js import { createStore } from "vuex";import menu from './menu'export default createStore({ modules: { menu }}) 这是为了创建store对象，方便外部使用需要去存储的变量，模块则是方便管理不同的变量类型 menu.js const state = { isCollapse: false, select...
