- 博客(20)
- 收藏
- 关注
RSS订阅原创 vue 未登录导航守卫判断
如果没有登录//如果没有登陆 跳到login页面 let path = to.path if(path.indexOf('shopcart') != -1 || path.indexOf('trade') != -1 || path.indexOf('addcartsuccess') != -1 || path.indexOf('center') != -1){ next('/login?redirect='+path)//带参数 这样登录后去想去的地址 }else{ next
2022-03-07 01:00:44
435
原创 vue 路由独享守卫
想进到'trade'页面 必须从shopcart进来 否则进不去beforeEnter:(to,from,next)=> { if(from.path == '/shopcart'){ next() }else{ next(false) } }很明显 独享守卫不是全局的 只负责属于自己的事,别的页面他不管...
2022-03-07 00:20:11
387
原创 vue打包去掉 map文件
在vue.config.js里加入这段代码//去掉map文件productionSourceMap:false,
2022-03-06 23:25:39
3222
2
原创 vue 使用 vue-lazy懒加载
1.下载:npmivue-lazyload-S2.在main.js里引入//懒加载import VueLazyload from 'vue-lazyload'import loadImg from '@/assets/images/123.gif'// or with optionsVue.use(VueLazyload, { loading: loadImg,})3.在页面中直接使用<img v-lazy="item.defaultImg" />...
2022-03-06 20:44:52
870
原创 element-ui 在vue2 安装和按需加载
下载 : npm i element-ui -S按需引入要下载 babel-plugin-component下载: npm install babel-plugin-component -D修改 babel.config.js 文件module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", {
2022-03-05 17:59:53
540
原创 vue 临时会话sessionStorage
//加入session缓存 临时会话 sessionStorage.setItem('SKUINFO',JSON.stringify(this.skuInfo));因为数据储存不支持对象 所以把对象 this.skuInfo 转成字符串sessionStorage.setItem()------设置接收return JSON.parse(sessionStorage.getItem('SKUINFO'))获取的时候把他转成对象就可以使用了sessionStorage.g..
2022-02-28 22:44:23
262
原创 加入购物车的第一步 和 uuid的使用
1.添加api//添加到购物车 (获取某个产品的数量)export const reqAddOrUpdateShopCart = (skuId,skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`,method:'post'})记住 post方式传值 也可以是url带参数 这样更方便2.点击加入购物车按钮接口规定的参数为 /cart/addToCart/${skuId}/${skuNum}所以我们要传2个值派
2022-02-28 11:04:16
2229
原创 vue 输入框的判断
changeSkuDec(){ changeInput(e){ let Val = e.target.value; // console.log(Val) let skuVal = Val * 1; if(isNaN(skuVal) || skuVal<1){ this.skuNum = 1 }else{ this.skuNum = parseInt(skuVal) } }
2022-02-27 21:19:11
1696
原创 vue 详情页产品轮播,图片放大镜效果
<template> <div class="spec-preview"> <img :src="skuImageList[imgIndex].imgUrl" /> <div @mousemove="mouseMove" class="event"></div> <div class="big"> <img ref="big" :src="skuImageList[imgInde...
2022-02-27 19:25:10
852
原创 vue 分页组件的实现
创建组件组件内容<template> <div class="pagination"> <!-- 上 --> <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)"> 上一页 </button> <button v-if="startNumAndEndNum.start > 1
2022-02-26 10:15:07
384
原创 import 带{} 和不带的区别
import 带{} 和不带的区别https://blog.youkuaiyun.com/ALakers/article/details/108568999
2022-02-23 14:02:04
659
原创 vue里mockjs的使用 和实现轮播图swiper案例
下载 npm install mockjs1.在src目录下创建mock文件夹 再创建要用的 banner.json文件我们以banner数据来做[{ "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/banner2.jpg" }, { "id": "3", "imgUrl": "/images/banner3.jpg" }, { "id": "
2022-02-23 09:48:05
336
原创 vue常用的导航跳转带参数this.$router.push
this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword}});这是最常用的 在router.js定义好{ path:'/search/:keyword',//keyword为占位使用 可显示到url上 component:Search, meta:{show:true}, name:'search' //为搜索定义一个名字 }点击搜索methods..
2022-02-22 17:47:59
1002
原创 vue 搜索页面 nav动画显示隐藏
.slide-fade-enter-active {transition: all .2s ease;}.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.slide-fade-enter, .slide-fade-leave-to{transform: translateY(5px);opacity: 0;}
2022-02-22 11:13:27
793
原创 使用vuex模块化 来实现导航功能
<template> <!-- 商品分类导航 --> <div class="type-nav"> <div class="container"> <h2 class="all">全部商品分类</h2> <nav class="nav"> <a href="###">服装城</a> <a .
2022-02-22 00:48:15
180
原创 vuex模块化开发
小仓库代码//state 存数据的地方const state = { a:1};//mutations 修改state的唯一手段const mutations = { };//action 处理action 书写逻辑的地方const actions ={ //这里修改业务逻辑 不可修改state}//getter 理解为计算属性const getters = { }//暴露出去export default{ state, mutation...
2022-02-20 23:22:49
341
原创 vuex的简单使用
下载好以后引入配置如下import Vue from "vue"import Vuex from 'vuex'//使用插件 使其生效Vue.use(Vuex);//state 存数据的地方const state = { count:1};//mutations 修改state的唯一手段const mutations = { ADD(state){ state.count++ }};//action 处理action 书写逻辑的地方const actions =
2022-02-20 23:00:16
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人