导航栏Router

确定页面 url

#/money 记账、 #/labels 标签 、#/statistics 统计；默认进入记账页面，添加404页面

import Money from '@/views/Money.vue';
import Labels from '@/views/Labels.vue';
import Statistics from '@/views/Statistics.vue';
import Notfound from '@/views/Notfound.vue';

const routes: [
  {
    path:'/',
    redirect:'/money'    //重定向到默认界面
  },
  {
    path:'/money',
    component:Money
  },
  {
    path:'/labels',
    component: Labels
  },
  {
    path:'/statistics',
    component:Statistics
  }，
  {
    path:'*',            //配置404（之前的所有路由都不匹配则404）
    component: Notfound
  }
];

// App.vue
  <div id="app">
    <router-view></router-view>
  </div>

Nav组件

封装成组件，按需引用

引入思路：

i.   App.vue文件全局引入<Nav/>
     缺点：部分页面无法隐藏nav
ii.   每个组件自己引入<Nav/>
	a. Options.components局部组件
        b. Vue.components全局组件

• App.vue

// /components/Nav.vue
<template>
  <div>
    <router-link to="/labels">标签</router-link>|
    <router-link to="/money">记账</router-link>|
    <router-link to="statistics">统计</router-link>
  </div>
</template>

• 页面单独引用

<template>
  <div>
    Money
    <Nav/>
  </div>
</template>
<script lang="ts">
  import {Component} from 'vue-property-decorator';
  import Nav from '@/components/Nav.vue';
  @Component({
    components: {Nav}
  })
</script>

• 全局引用 在 main.ts 文件中引入

import Nav from '@/components/Nav.vue';
Vue.component('Nav',Nav);

404 页面

<template>
  <div>
    <div>当前页面不存在， 请检查网址是否正确</div>
    <div>
      <router-link to="/">返回首页</router-link>  //跳转链接到/money
      // <a href="#/">首页</a>
    </div>
  </div>
</template>