App.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div id="app">
  3. <transition name="fade" mode="out-in">
  4. <!-- <keep-alive>
  5. <router-view v-if='$route.meta != null && $route.meta.keepAlive'/>
  6. </keep-alive> -->
  7. <router-view v-if="isRouterAlive"/>
  8. </transition>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'app',
  14. components: {},
  15. //父组件中返回要传给下级的数据
  16. provide() {
  17. return {
  18. reloads: this.reloads,
  19. }
  20. },
  21. data(){
  22. return{
  23. isRouterAlive:true
  24. }
  25. },
  26. methods:{
  27. reloads(){
  28. this.isRouterAlive = false
  29. this.$nextTick(() => {
  30. this.isRouterAlive = true
  31. })
  32. }
  33. }
  34. }
  35. </script>
  36. <style lang="scss">
  37. body {
  38. margin: 0px;
  39. padding: 0px;
  40. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  41. font-size: 14px;
  42. -webkit-font-smoothing: antialiased;
  43. }
  44. #app {
  45. position: absolute;
  46. top: 0px;
  47. bottom: 0px;
  48. width: 100%;
  49. }
  50. .el-submenu [class^=fa] {
  51. vertical-align: baseline;
  52. margin-right: 10px;
  53. }
  54. .el-menu-item [class^=fa] {
  55. vertical-align: baseline;
  56. margin-right: 10px;
  57. }
  58. .toolbar {
  59. background: #f2f2f2;
  60. padding: 10px;
  61. .el-form-item {
  62. margin-bottom: 10px;
  63. }
  64. }
  65. .fade-enter-active,
  66. .fade-leave-active {
  67. transition: all .2s ease;
  68. }
  69. .fade-enter,
  70. .fade-leave-active {
  71. opacity: 0;
  72. }
  73. </style>