1.路由重复点击报错处理
重复点击报错，重写push方法，返回的是promise，可以.then.catch处理，或者$touter.push("/login",成功回调，失败回调)
2.动态路由,传空值跳转或undefind
`path:/search/:keyword? `
`$router.push({name:search,params:{keyword:关键词||undefind}})` 通过？形式可以传空值跳转，并且传undefind
3.全局注册组件
在main.js引入组件，Vue.component("Navbar",Navbar) 引入的组件名称
4.lodash 防抖节流 鲁大师
这是导入所有的[百度搜索，里面内容很多]
import _ from lodash
Addactive:_.throttle(function(){函数体}，1000)
导入指定节流函数
import {throttle} from 'lodash/function
Addactive:throttle(function(){函数体}，1000)
5.F12查看导入的第三方库js大小，耗时
6.使用mock.js 生成接口数据
百度npm 使用mock.js mock服务器模拟数据，在npm搜索mockjs,打开官网。帮助前端生成接口数据，生成接口可以通过ajax进行访问。
在vue项目中src下创建mock文件夹，创建mock.js或index.js,
npm i mockjs 安装，
在创建的mock.js文件中，引入 import Mock from mockjs
定义请求接口 Mock.mock('/a','post',[a,b,c])
在mock文件夹下创建banner.json文件，里面是模拟的数据
在js文件中，引入json
Mock.mock('/mock/banner','post',{
code:200,
message:成功,
data:引入的json
})
访问 axios.get('/a').then(res=>{})
或单独封装mock的axios请求
import Axios frmo 'axios'
const request = Axios.create({
baseURL:'/mock',
timeout:5000
})
export default({method,url,data})=>{
return request({
method,url,
[method.TOLOWERase()==='get'?'params':'data']:data
})
}
7.使用swiper@5
swiper@5.png
8.如果循环点击事件太多，不能用ruterlink和push这样影响性能，用事件委托，给它的最外层父元素添加点击事件，给需要点击的不同标签添加自定义属性(自定义属性不可以使用大写字母):data-category-name=""，触发点击事件时候获取点击的当前事件对象e，通过e.target 获取当前点击的元素，判断点击当前元素有没有自定义的属性用dataset，使用js获取元素中data-属性，let attr=e.target.dataset.categoryName，获取可以使用大写字母，attr是设置自定义属性的value，如果有值就跳转。
9. 多个页面使用数据只请求一次写在vuex中，在app组件挂载的时候调用，this.$store.dispatch("命名名字/方法名")
多个页面使用数据只请求一次写在vuex中
通过mapset获取值
export default {
computed:{
...mapState('home',['navList'])
}
}
通过getter获取值
...
state: {
searchInfo:[]
},
mutations: {
SET_SEARCH_INFO(state,data){
state.isFgOrXg = data
},
}，
actions:{
async getSearchInfo({commit},query){
const res= await getSearchGoods(query)
//attrsList 属性列表
//goodsList 商品列表
commit('SET_SEARCH_INFO',res)
}
},
getters:{
goodsList:state=>state.searchInfo.goodsList
}
...
10.响应拦截器，统一处理
响应拦截器，统一处理
ce60b0ad8ea14473f287317063b89b4.jpg
11.事件总线，一个小功能没必要使用vuex，在main.js里面注册全局事件总线，Vue.prototype.$bus=new Vue()
发布事件，this.$bus.$emit("事件名称")
订阅事件，this.$bus.$on("事件名称"，()=>{处理的回调})，挂载的时候订阅事件
取消订阅，this.$bus.$off("事件名称") 销毁组件前取消订阅
12.路由里面内容多的话新建一个routes.js在里面专门写路由
import notFind from "@/components/404/NotFind"
import Login from "@/views/login"
import Layout from "@/layout"
const Home = () => import('@/views/home')
const MyOrder = () => import('@/views/myorder')
const Ordertabs = () => import('@/views/ordertabs')
const routes = [
{ path: "/", component: Login },
{
path: '/index',
component: Layout,
redirect: '/home',
children: [
// 首页
{ path: "/home", component: Home },
{ path: '/ordertabs', component: Ordertabs, meta: { title: "个性定制" } },
{ path: '/myorder', namem: 'myorder', component: MyOrder, meta: { title: "我的订单" } },
]
},
{ path: '/login', name: 'login', component: Login, meta: { title: "登录" } },
// { path: '/course/:type', name: 'course', component: Course, props: true, meta: { title: "课程分类" } },
// { path: '/courseDetail/:type', name: 'CourseDetail', component: CourseDetail, props: true, meta: { title: "课程介绍" } },
{ path: '*', component: notFind, meta: { title: '404' } },
]
export default routes;
在index.js直接引用
`import routes from "./routes.js"`
13.在路由中配置props在页面可以直接获取参数，props:['skuId']
{ path: '/myorder/:skuId', namem: 'myorder', component: MyOrder, name:'myorder',props:true },
在页面直接 props:['skuId'] 获取
14.设置跳转页面滚动条滚动到顶部
第一种方式，写在main.js中
// 设置全局路由守卫
router.beforeEach((to,from,next)=>{
window.scrollTo({top:0})
next()
})
第二种方式,写在路由index.js中
const router = new VueRouter({
routes,
//滚动行为，设置页面滚动位置
// behavior:'smooth' 设置滚动动画
scrollBehavior:(to,from,savedPosition)=>{
if(savedPosition) return savedPosition
reteurn {x:0,y:0,behavior:'smooth'}
}
})
15.如果点不出来直接用空对象
// 空对象
const {category1,category2,category3} = state.goosInfo.categoryView || {}
// 空数组
listArr[0].params|| []
16处理错误信息返回上一页，处理错误信息返回是promise,可以直接catch
9fa01f039e0ba0f286fb351e6d4f068.jpg
bb6a19ca76b9d7b9d53f803223dda10.jpg
17.判断非数字 isNaN
18.所有请求获取数据在vux中请求，购物车用计算属性
59a970dfbd3c960726e913130f49fa4.jpg
19.mapaction 获取请求的函数
9ea636842f63216333967691d223dd1.jpg
20.可以有两个页面布局，layout ，两个对象。main.js只放引入的，其他相关js单独创建js分离出来
21.处理token可以单独创建js文件，单独处理
f8b8ed6174cfac8e05bd79ab2275d74.jpg
851b04d20dcb1c9a0441b241e89ad14.jpg
777b99891843c05d73ed256bb65a0ae.jpg
22.单独创建的js文件，取vuex中的值，导入store,导入store.index根模块
2feae6a20b9a26b9751e9b0f2173bba.jpg
23.登录权限控制
af3b564f1bdf86a9aa2d8928a411fa2.jpg
24vue表单验证
a0c25fa6a077d561255e5d36ffc11c4.jpg
4bdb5114cd4cdbc55ece8a6c0ae1b20.jpg
55971d7eb30648df7ce4a0d7314628e.jpg
e8eac27f4dd1768513638ebc7c053a2.jpg
