vue小知识

作者: GG_lyf | 来源:发表于2020-11-13 11:18 被阅读0次

前言

  最近那个wedo项目终于快完工了,管理员的页面已经写完了,最重要的是还收获了一个np的插件和一个监控路由的小东西


开搞

1.在写完管理员的时候出现一个问题,每次修改完数据之后页面自动刷新的时候出现退出到了登录页,这个问题可真是难受。
  情景:把数据存进sessionStorage里面,再在vuex里面存一套,在路由守卫那里用这两个判断里面存的值,如果相等就跳转,不相等就跳回到登录页面。
  问题:无论刷新哪个页面,都会跳转到登录页面
  解决:持久化vuex
  方法:安装持久化插件 npm install vuex-persistedstate --save,打开storeindex.js,在里面添加import states from "./vuex-persistedstate",在Vuex.Store里面加上plugins:[states()]

2.在写完这个东西之后,突然发现我的管理员界面中刚进去的时候空空如也,只有左边的导航栏,看着光秃秃的,这时候我就想,可以搞那个默认打开的路由啊。搞了半天放弃了,搞不定啊,但是在刚进去的时候路由是空的啊,可以经过判断路由是否变化来搞个图片啊。
  情景:刚进页面的时候路由是空的,可以经过判断路由是否变化来显示一个图片,以使页面不会太单调。
  思路:如果路由变化,那就把路由中的东西显示出来,如果没变,那就把图片显示出来。
  解决:可以使用路由监控
  方法:在页面中添加一个watch:{}事件,用于监听路由。在里面加上"$route":"routeChange",这是个方法。因此在methods中添加这个方法

watch:{
    "$route" : "routeChange"
}
routeChange: function(to,from){//去哪里,从哪里来
    console.log(to.path);
    console.log(from.path);
    //和一些自己想要的操作
}

3.在idea中用spring Initializr创建springboot项目的时候出现Default路径不能用,或者连不上网的问题。可以用阿里的地址https://start.aliyun.com/,不得不再次赞叹阿里的强大啊!

相关文章

  • 【Vue】常用指令之v-show

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-show 写在前面 Vue (...

  • 【Vue 】:visible.sync 的作用

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue中的visible.sync的作用 1.写在...

  • 【Vue】常用指令之v-text

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-text 目录 1.v-tex...

  • 【Vue 】过滤器filters

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue过滤器filters 1. 什么是过滤器? ...

  • 【Vue】常用指令之v-html

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-html v-html指令其实...

  • 【Vue】常用指令之v-bind

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-bind v-bind指令是专...

  • 【Vue】常用指令之v-on

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-on v-on指令是事件绑定指...

  • 【Vue】常用指令之v-if

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-if条件判断 1. v-if指...

  • 【Vue】常用指令v-if和v-show的区别

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue指令v-if和v-show的区别 v-sho...

  • Vue小知识

    Vue基础知识 Vue框架作用 拓展html的功能,属性 vue是一套构建用户界面的 渐进式框架,Vue.js 的...

网友评论

    本文标题:vue小知识

    本文链接:https://www.haomeiwen.com/subject/rudvbktx.html