MoneyMemory记账应用1(Vue版)

2021-03-05  本文已影响0人  shangjingfan

一、导航栏放到哪

1. 放到App.vue中:那么每个页面都会有导航栏,不用在其他组件中添加导航栏,缺点是如果有的页面不需要导航栏,就需要想办法清除掉
<div>
  <router-link to="/money">记账</router-link>
  <router-link to="/labels">标签</router-link>
  <router-link to="/statistics">统计</router-link>
</div>
2. 将导航栏制作成单独的组件,然后在每个组件中单独引用:多了很多重复的代码,首先要引用,然后再每个组件注册这个组件,再使用,以Money.vue为例,这三个步骤会在每个需要Nav的组件中重复
<template>
  <div>
    Money.vue
    <Nav/> //第三步,使用
  </div>
</template>
<script lang="ts">
  import Nav from '@/components/Nav.vue'; //第一步,引入
  export default {
    name: 'Money',
    components: {Nav}, // 第二步,注册
  }
</script>
3. 最终方案,在main.ts中全局注册导航组件,在需要的页面直接使用
import Nav from '@/components/Nav.vue';
Vue.component("Nav", Nav)

二、手机不要使用fix定位

上一篇下一篇

猜你喜欢

热点阅读