<router-view></router-view>
</div>
</div>
</div>
</template>
除了我们的 navbar 以外，我们还需要一个 .container 去放我们其余需要展示的信息。
并且在这里我们要放一个 router-view 标签， vue-router 的切换就是通过这个标签开始显现的。
在这有个与1.0不同的地方
以前我们可以直接通过写a标签 然后写v-link属性进行路由跳转，在vue2中改为了写<router-link> 标签再写对应属性（to）进行跳转
接着，我们需要创建一个 Home.vue 作为我们的首页
// src/components/Home.vue<template>
<div class="jumbotron">
<h1>任务追踪</h1>
<p>
<strong>
<router-link to="/time-entries">创建一个任务</router-link>
</strong>
</p>
</div>
</template>
不出意外的话，你可以看见如下效果
创建侧边栏组件
目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。
// src/App.vue //...
<div class="container">
<div class="col-sm-3">
<sidebar></sidebar>
</div>
<div class="col-sm-9">
<router-view></router-view>
</div>
</div>
//...
<script>
import Sidebar from './components/Sidebar.vue' export default {
components: { 'sidebar': Sidebar },
}
</script>
在 Sidebar.vue 我们需要通过store去获取总时间，我们的总时间是共享的数据
// src/components/Sidebar.vue
<template>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="text-center">已有时长</h1>
</div> <div class="panel-body">
<h1 class="text-center">{{ time }} 小时</h1>
</div>
</div>
</template>
<script>
export default {
computed: {
time() {
return this.$store.state.totalTime
}
}
}
</script>
创建计划列表组件
然后我们需要去创建我们的时间跟踪列表。
// src/components/TimeEntries.vue<template>
<div>
//`v-if`是vue的一个指令
//`$route.path`是当前路由对象的路径，会被解析为绝对路径当
