我们的项目需要三个页面：记账，标签，统计。默认页面是记账

在vue中可以使用vue router简单的做到。

首先，在 src/router/index.ts 里，的routes 数组里，定义需要的页面：

const routes: Array<RouteConfig> = [
    {
      path: '/',
      redirect: '/money'
    },
    {
      path: '/money',
      component: Money
    },
    {
      path: '/labels',
      component: Labels
    },
    {
      path: '/statistics',
      component: Statistics
    },
]

如果用户访问了/money路径，就展示 Money 组件。如果访问根路径，就重定向到/money路径。

在最上层组件App的template里，

<template>
  <div id="app">
    <router-view/>
    <hr/>
    <div>
      <router-link to="/labels">标签</router-link>
      |
      <router-link to="/money">记账</router-link>
      |
      <router-link to="/statistics">统计</router-link>
    </div>
  </div>
</template>

<router-view/> 表示把页面放在哪里展示。

<router-link> 就是底部导航栏，除了<router-view/>的部分，不管切换到哪个页面，都一直展示。

做到了如果点击“标签”，就相当于访问/labels路径，就会展示Labels组件。而底部的导航栏会一直存在。

改进

在App.vue里把底部导航栏写死有一个问题，如果有页面不需要导航栏，就很麻烦。

所以我们把导航栏做成一个组件，哪个页面想用导航栏，自己引入这个组件就可以了。

Nav.vue

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

引入组件有两种方式，在需要的页面分别import组件，然后通过components选项指定。但是这样做也很麻烦。

所以我们使用全局组件Vue.component()方法。直接在main.js里全局引入这个组件，那么在Money等组件里，就可以在template里直接使用Nav组件了。

main.ts

import Nav from '@/components/Nav.vue';

Vue.component("Nav",Nav)

Money.vue

<template>
    <div>
        Money.vue
        <Nav/>
    </div>

</template>

添加404页面

如果用户访问了不存在的路径，就404

在router/index.ts里再添加一条路径，注意要加在最下方。因为是按顺序查找路径的，如果用户访问的都不是上边四种路径，就来到最后一条

{
    path:'*',
    component:NotFound
}

‘*’ 表示所有路径。

在NotFound组件里：

<template>
    <div>
        <div>当前页面不存在，请确认网址是否正确</div>
        <div>
            <router-link to="/">返回首页</router-link>
        </div>
    </div>
</template>

这里404页面是不需要导航栏的。

导航栏选中高亮 active-class

下方的导航栏有三个router，应该做到点击哪个，就切换到哪个页面，同时高亮。

在vue router里可以通过添加一个active-class 的属性简单做到。把这个属性加到想高亮的标签上，在我们这里就是 router-link标签。它可以做到：如果被选中，就给这个标签加上一个class。

然后就可以通过css，改变颜色。

<router-link class="item" to="/labels" active-class="selected">
            <Icon name="label"/>
            标签
</router-link>

.selected{
            color:#F9B3CB;
}

box-shadow样式，底部导航栏悬浮

通过box-shadow，为导航栏加阴影，看起来像悬浮的。

box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);

《记账项目-router》

改进