前端# vue
进来的,我都学
老君-hjs
屎山雕花师
展开
-
vue3.x 一套代码打包多环境多项目
一套代码打包多环境多项目需求多环境打包实现多环境打包实现版本号:vue/cli:4.5.12node:v14.15.3npm:6.14.9需求代码多环境打包很常见,直接说说多项目打包:多项目打包就是一套代码,只有logo,部分样式,标题等不同。如果分好几套代码,后期改需求总不能每套代码都改一遍,所以就需要多项目打包。(当然,如果后期项目差异过大时,还是强烈建议把项目区分开来)多环境打包实现在package.json的scripts下push以下代码"dev": "vue-cl原创 2021-11-08 18:52:32 · 2343 阅读 · 3 评论 -
vue3.x 路由*匹配
版本号:vue/cli:4.5.12@vue/cli-plugin-router: ~4.5.0const router = createRouter({ history: createWebHashHistory(), routes: [{ name: 'Home', path: '/', component: () => import( /* webpackChunkName: "home" */ '../views/home/index.vue'), },{ path: '原创 2021-11-08 12:02:21 · 505 阅读 · 0 评论 -
vue3.x报警告:Path “/“ was passed with params but they will be ignored. Use a named route alongside ...
版本号:vue/cli:4.5.12@vue/cli-plugin-router: ~4.5.0问题以下写法会导致报警告:[Vue Router warn]: Path "/" was passed with params but they will be ignored. Use a named route alongside params instead.[Vue Router 警告]:路径“/”与参数一起传递,但它们将被忽略。改为在 params 旁边使用命名路由const router原创 2021-11-08 11:59:29 · 13346 阅读 · 0 评论 -
vue3.x使用swiperUI “loop“: true失效
版本号:vue/cli:4.5.12swiper:^6.8.4问题动态加载图片时, swiper 的 loop: true 失效解决方案这里有两种解决方案启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。默认false,不开启,可以使用update()方法更新。observer: true,observeParents: true,observeSlideChildren: true,...原创 2021-11-08 11:46:32 · 572 阅读 · 0 评论 -
vue3.x使用swiper 做卡片轮播
版本号:vue/cli:4.5.12swiper:^6.8.4安装npm install --save swiper使用以及配置<div class="swiper-container home_swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aImages" :key="index"> <img :src="item原创 2021-11-08 11:31:19 · 2698 阅读 · 9 评论 -
vue3.x使用swiperUI动态加载图片失败
版本号:vue/cli:4.5.12swiper:^6.8.4问题动态加载图片,但是动态加载图片为空,需要显示默认图片时使用v-if失效<div class="swiper-container home_swiper"> <div class="swiper-wrapper" v-if="aImages.length > 0"> <div class="swiper-slide" v-for="(item,index) in aImages" :key原创 2021-11-08 10:43:02 · 470 阅读 · 0 评论 -
vue3.x使用provide / inject进行页面刷新
需求:A, B, C三个页面,其中B页面缓存 A=>B刷新;B=>C,然后C=>B不刷新;B=>A,然后A=>B刷新;B=>D,然后D=>B根据B携带的参数判断是否让B刷新 这种情况很多,页面虽然缓存了,但是很多情况都需要刷新,所以浏览了很多文章感觉这个写的是最适用于我的。vue3.0刷新页面、刷新组件(provide / inject在setup里使用) 我也做一下在自己项目中具体使用的记录~使用:App.vue<template&原创 2021-11-05 17:49:08 · 1060 阅读 · 0 评论 -
vue-router 动态添加路由,二次添加遇到的问题
@[TOC] 修改记录vue-router 动态添加路由,二次添加遇到的问题问题:因为路由根据登录角色获取的路由信息,如果退出后再次登录则需要重新获取路由信息因为addRoutes 给路由表中添加路由,导致有些路由信息重复报警告:Duplicate named routes definition解决:// constantRoutes是公共路由,如下:export const constantRoutes = [{ path: '/redirect', component: Layou原创 2021-03-13 09:41:08 · 1520 阅读 · 0 评论 -
vue路由守卫 —— 组件内beforeRouteEnter
beforeRouteEnter在渲染该组件的对应路由被确认前调用,用法和参数与beforeEach类似,next需要被主动调用注意:此时组件实例还未被创建,不能访问this可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数beforeRouteEnter(to, from, next) { console.log(this); // 这里打印this是undefined console.log(to, '参数1:即将要进入的目标原创 2020-06-03 10:13:17 · 3401 阅读 · 0 评论 -
vue-cli3.x之入坑记录-vue.config.js配置
vue.config.js-详细配置参考链接:https://segmentfault.com/a/1190000018037214?utm_source=tag-newestmodule.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 比如 https://www.my-app.com/ /...原创 2019-11-02 17:37:29 · 400 阅读 · 0 评论