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)