VUE 学习笔记 从零开始一步一步构建 VUE 单页应用（四）

从零开始一步一步构建 VUE 单页应用（一）

从零开始一步一步构建 VUE 单页应用（二）

从零开始一步一步构建 VUE 单页应用（三）

在前面的文章中我们把一个简单的单页应用搭建起来了，现在我们就来给它加点料。

首先是底部导航栏，它有二个标签，标签点击后需要切换到不同的页面，每个页面其实就是一个路由，前面我们已经写了一个首页出来，现在再写一个“我的”页面出来，直接上代码：

<template>
<div>
<p>This is MinePage</p>

<div id = "mine-list" v-for = "item in data">
<div>{{item.money}}</div>
</div>
</div>
</template>

<script>
export default {
name: 'Mile',
data() {
return {
data: [
{money: 100},
{money: 1000},
{money: 10000},
]
}
}
}
</script>

页面写好之后需要去路由里面注册下，在 router/index.js 文件中注册一个新的路由。

import Vue from 'vue'
import Router from 'vue-router'
//1,导入组件
import Home from '@/components/Home'
import Mine from '@/components/Mine'

Vue.use(Router);

//2，注册路由
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/mine',
name: 'Mine',
component: Mine
}
]
})

跟前面说的一样，就需要做二件事：

1，导入组件页面

2，在路由中注册

这里修改好了以后，就可以去 BottomNav.vue 文件里面去把原来的写死的二个 tab 换成链接的形式，以进行路由跳转。

<template>
<div id="bottomNav">
<!--<div class="tab">首页</div>-->
<!--<div class="tab">我的</div>-->
<router-link to="/" class="tab">首页</router-link>
<router-link to="/mine" class="tab">我的</router-link>
</div>
</template>

//省略无关代码

可以看到，改动很小，就是把以前的 div 换成了 router-link，这个是 vue 的路由跳转链接，相当于 H5 中的 a 标签。在 router-link 中，to 后面的字符串就是我们在路由文件中注册的路由的 Path。这样，应用内的路由跳转功能也就完成了。



写到这里，vue 单页应用的初始部分也就完成了，这一部分也是没有官方文档的一部分，如果是完成没搞过的人可能会不知如何下手（比如说我就是，，，），所以把这部分记录下来，后来者看到可以少踩些坑。

vue 单页应用的开发思路就是上面这样，当然我这里记录下来的都是一些最简单的一部分，vue-router 剩下的一些高级和进阶用法可以去看 官方文档

另外，要开发一个完整的应用出来，光用 vue-router 是远远不够的，还需要与后台进行数据通信，各组件状态管理等事情需要做，分别可以使用 vue-resource 和 vuex。

我还没有学到 vue-resource 和 vuex ，等以后再记录吧。