App.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div id="app">
  3. <userHeader :setUserInfo="setUserInfo"></userHeader>
  4. <main class="main">
  5. <!-- route outlet -->
  6. <router-view :userInfo="userInfo"></router-view>
  7. </main>
  8. </div>
  9. </template>
  10. <script>
  11. import { getBlogs } from "./api";
  12. import HelloWorld from "./components/HelloWorld.vue";
  13. import userHeader from "./components/user-header.vue";
  14. export default {
  15. name: "App",
  16. components: {
  17. HelloWorld,
  18. userHeader,
  19. },
  20. data() {
  21. return {
  22. userInfo: {},
  23. };
  24. },
  25. watch: {
  26. $route(to, from) {
  27. this.$nextTick(() => {
  28. this.isAdmin = this.$route.path.indexOf("/admin") > -1;
  29. });
  30. },
  31. },
  32. async mounted() {
  33. this.$nextTick(() => {
  34. this.isAdmin = this.$route.path.indexOf("/admin") > -1;
  35. });
  36. },
  37. methods: {
  38. setUserInfo(value) {
  39. this.userInfo = value;
  40. },
  41. },
  42. };
  43. </script>
  44. <style>
  45. #app {
  46. font-family: Avenir, Helvetica, Arial, sans-serif;
  47. -webkit-font-smoothing: antialiased;
  48. -moz-osx-font-smoothing: grayscale;
  49. /*text-align: center;*/
  50. color: #2c3e50;
  51. /*margin-top: 60px;*/
  52. }
  53. .main {
  54. margin-top: 66.5px;
  55. /*margin-top: 200px;*/
  56. }
  57. </style>