Vue中路由详解什么是路由？基本使用几个注意点多级路由（嵌套路由）路由的query参数命名路由路由的params参数跳转+传参 总结路由的props的配置路由懒加载```<router-link>```的replace属性编程式路由导航`$router`和`$route`的区别**1、route对象****2、router对象**缓存路由组件两个新的生命周期钩子路由守卫路由器的三种种
前一段时间完成了一个项目，该项目要求黑夜和白天两种主题色，可以动态的切换。经过多方的查找研究，终于完成。谨以此文在此记录一下。此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识，具体API详参官网https://www.sass.hk/docs/。大概的思路就是给html根标签设置一个data-theme属性，通过js切换data-theme的属性值，sass根据此属性来判断使
转载
2024-10-10 09:08:06
205阅读
## Vue2 路由守卫与 Axios 的实现
当你在使用 Vue2 进行 web 开发时，常常需要结合 `Axios` 和 Vue Router 来管理路由守卫。这篇文章将带你了解该如何实现这一功能。首先，我们来看一下这个过程的流程。
### 流程步骤表
| 步骤 | 描述 |
|------|-----------------------
路由是VUE的一大特点，初期开发的时候自己没理解好导致刷新跳转到首页还有路由之间传值复杂化的问题。现在就分享一下我的部分体会。一、嵌套路由 路由嵌套应该是基础知识，坑点有： 1.按照写好的菜单跳转只push 当前组件而不是按照路由文件顺序加载（比如我要加载home.vue 直接push该path 结果不行，在页面重新引入home.vue 发现可以了，就以为自己写
前言最近接收了一个陈年的vue2项目，经历了多个前辈高人，目前可以说是一座伟岸的shit山。如果改改bug之类的雕花需求还能接受，但是在交付后了来了一个需要腾空10米然后空中转体720平稳落地之后进行雕花的高难度需求。对tabs页面进行缓存需要对现有项目进行页面缓存,点击面包屑顶部的tabs标签<如下图>切换页面时保持住页面缓存,使用菜单或按钮跳转切换页面则需要进行更新(清除缓存)难点
转载
2024-07-15 11:06:13
598阅读
一、路由
路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为：后端路由和前端路由。
1.1 路由分为两大类：
前端路由：Hash地址与组件之间的对应关系。
SPA与前端路由之间的关系：SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一一个页面内完成。此时不同组件之间的切换，要
原创
2024-01-21 02:18:43
438阅读
概念：路由守卫：就是进入当前路由前，有个人“门卫”进行保护，也可以理解为“安检”。路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 1.全局路由守卫全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫 ，钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。router
转载
2023-11-02 08:47:33
141阅读
在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或看几篇博客应该就能实现。但这里面其实还有很多细节需要我们去做，如Tab切换时，切换过的Tab组件状态怎样缓存在项目中经常会有 页面A -> 页面B -> 页面C 则从
转载
2024-03-18 12:22:36
465阅读
文章目录一、组件1. 创建组件2. 引用组件3. 组件之间如何传递参数一、组件1. 创
原创
2022-09-30 10:25:02
375阅读
vue路由安装插件npm -i vue-router// main.jsimport VueRouter from 'vue-router'import router fro
原创
2023-02-17 09:01:44
48阅读
现在的很多应用都流行SPA应用（singe page application) 。
传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。而在vue2.0版本后，vue官方推出vue-rou
vue路由概念、路由写法、路由模式、路由重定向、路由跳转传参方式
原创
2023-06-27 10:29:06
511阅读
【代码】Vue2 路由跳转传参。
原创
2024-09-05 10:10:51
38阅读
文章目录前言一、实现原理分析二、scss实现1.theme.scss2.handle.scssscss语法回顾1. @each遍历2. Maps值获取3. 混合指令@mixinscss实现换肤核心逻辑应用于UI库样式修改三、设置主题相关scss为全局变量 前言web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）
跨域设置 http://www.ituring.com.cn/article/200275 打包 npm adduser 如果长时间不登录，可能会过期，使用 npm login 进行登录就可以 pu
原创
2021-07-23 11:32:15
393阅读
eslint用于代码检查，prettier用于代码格式化，具体操作如下1.安装以下eslint插件
安装以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略检查的文件（1）eslint
用于检查和标示出ECMAScript/JavaScript代码规范问题工具。
（2）@babel/eslint-parser
简而言之就是一个解析器，允许您使用ES
转载
2024-05-29 12:57:59
283阅读
目录一、背景二、实现思路 方法1：定义全局的CSS变量 方法2：切换已定义好的css文件 方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)一、背景在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。二、实现思路 方法1：定义全局的CSS变量App.vue：<style>
/* 定义全局的css变量 */
转载
2024-04-15 12:52:08
1651阅读
main.js App.vue action.js getters.js index.js mutation.js types.js
转载
2017-06-24 05:50:00
220阅读
vue2
原创
2021-08-01 18:40:40
412阅读
