vue -路由 -代理

一 路由原理：

（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