一 路由原理:
(1)hash路由 ==> location.hash切换
window.onhashchange监听路径的切换
(2)history路由 ==> history.pushState切换
window.onpopstate 监听路径的切换
二 路由拦截:
router.beforeEach((to, from, next) => {
// 需要拦截的路由集合
const auth = ['/center', '/order', '/card', '/user']
if (auth.includes(to.fullPath)) {
// 验证token
if (!localStorage.getItem('token')) {
next('/login')
} else {
next()
}
} else {
next()
}
})
三 路由懒加载:
打包(build)后会整合成一个js文件 文件过大会导致首页加载缓慢 希望可以分开加载
只需要将 import Home from '../views/Home.vue' 换一种方式引入便可
const routes = [
{
path: '/Home',
name: 'Home',
component: () => import('../views/Home.vue')
}
]
当进入Home时 才会加载相应的js 实现路由懒加载
也可以进行按组分块
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
将会打包到同一个js
四 解决跨域(访问其他网站):
1 后端设置允许跨域 Access-Control-Allow-Origin: *
2 vue.config.js 中设置反向代理
以此URL 为例 'https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=A0179C403F4411EBA089E55DC7346AB66B2C37F371744D1BB23EF86099070964&optimus_risk_level=71&optimus_code=10' module.exports = { devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com', changeOrigin: true }, '/other': { target: 'url', changeOrigin: true } } } } 将以'/ajax' 开头的请求通过自己服务端向'https://m.maoyan.com'发送请求再返回 `注意`: 配置完vue.config.js后 必须重启服务
3 后端设置允许跨域 Access-Control-Allow-Origin: * 后 请求头中增加了其他字段 自己请求时需要添加
五 vuex持久化
https://github.com/robinvdvleuten/vuex-persistedstate
六 300ms延迟(click事件) 移动端事件
解决方法
1 添加 mate标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2 fastclick
https://github.com/ftlabs/fastclick
<script type='application/javascript' src='/path/to/fastclick.js'></script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); }
3 { touch-action*: manipulation; } // 注意不能设置为none
现在浏览器 配合1 3 就可以解决
七 手势
1 Hammer.js 是一个优秀的 轻量级的触屏设备手势
https://github.com/hammerjs/hammer.js
2 vue touch vue 项目中使用
https://github.com/vuejs/vue-touch/tree/next
八 后台模板(需付费下载)
http://www.bootstrapmb.com/tag/vuehoutai
九 一个基于 Vue 3 + Vant 3 的商城项目开源
地址: https://github.com/newbee-ltd/newbee-mall-vue3-app