小贺同学的blog

记录两个错误1在我部署了一个前端页面到服务器上的nginx后，我访问他报错403.显示没有权限。后来发现403的一个可能原因是因为nginx没有权限访问到/root中的内容。因为我把vue打包的页面直接放到了root目录下。因此报错，只要将这个dist文件放到其他位置即可正常访问了 2vue部署了路由的话，再部署到nginx上需要为vue的路由专门配置 12345location / { root html/dist; index index.html; try_files $uri $uri/ /index.html;#解决页面刷新 } 同时因为vue的代理服务器只在运行时才有用。因此需要再nginx部署代理服务器。或者再后端解决跨域问题。这里介绍再nginx解决代理的方法。 123456789101112location /api/ { # 单个服务 proxy_pass...

路由补充RangeError: Maximum call stack size报以上错误。其大意是说栈内存溢出。以下是我写的代码 12345router.beforeEach((to,from,next)=>{ if(!localStorage.getItem("token")){ next("/login") }}) 现在分析一下。假设他跳转到login页面，然后他会判断是否有token，判断完成，他将眺望login页面。跳转之后他又会进行判断是否又token 因为他不是next()，按照他的流程接着跳转。而是采用了next(“/login”)，表示他会重新发起一次跳转，也就是会再过一遍路由守卫。因此他会堆栈溢出而报错。修改后的代码可以改为 123456789router.beforeEach((to,from,next)=>{ if(to.path==="/login"){ ...

主要解决问题为get请求，post请求，params参数，data参数的区别和联系。 首先Get请求不能携带请求体，服务器接收到Get请求后，会默认忽视掉Get请求的请求体。也就是Get请求只能携带params参数，这个参数会直接跟在请求地址后面，组成一个字符串。 post请求既可以使用params请求，也可以携带data参数，data的参数会放在payload中。springboot需要获取post发送的payload需要通过@RequestBody来获取。

hash模式，history模式hash模式：他不会像服务器发送hash值，也就是#后面的内容不会发送到服务器中。history模式：会将路径内容发送到服务器中

路由守卫需要在路由中进行配置 全局路由前置1234567全局前置路由守卫//切换路由或者初始化的时候都会调用一次//to:前往的地址。from：过来的地址。next：是否允许前往，调用后即放行route.beforeEach((to,from,next)=>{ next()//允许放行}) 可以在路由中的meta属性中添加属性。来选择那些路由需要鉴权。哪些不需要鉴权。 后置1234567全局前置路由守卫//切换路由或者初始化的时候都会调用一次//to:前往的地址。from：过来的地址。next：是否允许前往，调用后即放行route.afterEach((to,from)=>{ }) 独享路由守卫在每个子路由内使用beforeEnter: (to,from,next)=>{}他的逻辑和全局路由守卫一样，但是他只写在单个子路由内。而且独享路由守卫只有前置路由守卫。 组件内路由守卫

路由2浏览器历史记录有两种方式push：不会删去刚刚的页面，而是添加新的页面记录，像压栈一样去记录replace：直接替换掉刚刚的页面记录。浏览器默认为push操作再router-link中添加一个属性:replace="true"他会将改点击事件记录为replace操作 编程式路由导航即不通过router-link即不适用a标签。而是通过写方法于button绑定之类的方法。关键方法：this.$router.push({})这里通过实现router的push方法跳转页面，也可以使用replace方法进行跳转。同样的push中的对象就是to的对象时写法。有name，path，params，query参数。 两种方法。$router.back()后退页面，￥router.forword()页面前进

VueRouter路由vue使用路由先安装vuerouter，同样的，vue2使用vuerouter3,vue3使用vuerouter4。新建一个路由，再src下建一个router文件夹，写一个index.js。 123456789101112131415161718import VurRouter from 'vue-router'//引入组件import About from '../component/About'import Home from '../component/Home'//创建一个路由器export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Hmoe ...

vuex的最终使用方法再标签中添加 1import {mapGetters,mapState,mapActions} from 'vuex' 然后有两种使用方法，下面示例： 1234567computed:{ ...mapGetters{sum:'sum',add:'add'}//对象式//对象式的含义：key：表示会在computed中生成的方法函数。而value:表示从mapGetters中调用的方法 ...mapGetters{['sum','add']}//数组式//数组式的含义即，同时创建再这边的函数并调用mapGetters的方法，这两个方法同名而已。同理mapMutation也是一样的}

vuex正式使用方法。 getters在store/index.js中添加一个 123456const getters = { bigSum(state){ return state.sum*10 }}然后再export中添加getters 再组件中要调用getters，使用$store.state.getters.内容

vuex再vuex中，有三个关键的内容和相关的函数方法 actions。再组件中调用actions需要调用this.$store.dispatch(‘方法’，value) 。组件会调用vuex中actions，请求使用方法，并传递value参数给他。而在actions中的方法中，他将会收到两个参数，context上下文，value参数。这个context上下文可以直接调用state，也可以调用commit方法来继续调用mutation。 mutations，他会接受actions发送过来的请求。然后他也会有两个参数，第一个参数就是state，也就是mutations可以用来修改state中的数据（当然，actions中的context也可以直接调用state并进行修改，但我们并不推荐这么做。）。然后可以直接再mutations中修改state的内容。state再组件中调用state的内容时，需要使用this.$store.state.内容...