// src/App.vue <template> <div> <nav> <div> <a href="#" > <i></i> 计划板 </a> <ul> <li><router-link to="/home">首页</router-link></li> <li><router-link to="/time-entries">计划列表</router-link></li> </ul> </div> </nav> <div> <div> </div> <div> <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> <h1>任务追踪</h1> <p> <strong> <router-link to="/time-entries">创建一个任务</router-link> </strong> </p> </div> </template>
不出意外的话，你可以看见如下效果
创建侧边栏组件
目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。
// src/App.vue //... <div> <div> <sidebar></sidebar> </div> <div> <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> <div> <h1>已有时长</h1> </div> <div> <h1>{{ 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`是当前路由对象的路径，会被解析为绝对路径当 //`$route.path !== '/time-entries/log-time'`为`true`是显示，`false`，为不显示。 //to 路由跳转地址 <router-link v-if="$route.path !== '/time-entries/log-time'" to="/time-entries/log-time"> 创建 </router-link> <div v-if="$route.path === '/time-entries/log-time'"> <h3>创建</h3> </div> <hr> <router-view></router-view> <div> <p v-if="!plans.length"><strong>还没有任何计划</strong></p> <div> <-- v-for循环，注意参数顺序为(item,index) in items --> <a v-for="(plan,index) in plans"> <div> <div> <-- `:src`属性，这个是vue的属性绑定简写`v-bind`可以缩写为`:` 比如a标签的`href`可以写为`:href` 并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`)，vue自己会去解析 --> <img :src="plan.avatar" /> <p> <strong> {{ plan.name }} </strong> </p> </div> <div> <h3> <i></i> {{ plan.totalTime }} </h3> <p> <i></i> {{ plan.date }} </p> </div> <div> <p>{{ plan.comment }}</p> </div> <div> <button @click="deletePlan(index)"> X </button> </div> </div> </a> </div> </div> </div> </template>
关于template的解释，都写在一起了，再看看我们的 script
// src/components/TimeEntries.vue <script> export default { name : 'TimeEntries', computed : { plans () { // 从store中取出数据 return this.$store.state.list } }, methods : { deletePlan(idx) { // 稍后再来说这里的方法 // 减去总时间 this.$store.dispatch('decTotalTime',this.plans[idx].totalTime) // 删除该计划 this.$store.dispatch('deletePlan',idx) } } } </script>
别忘了为我们的组件写上一些需要的样式
// src/components/TimeEntries.vue <style> .avatar { height: 75px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } .user-details { background-color: #f5f5f5; border-right: 1px solid #ddd; margin: -10px 0; } .time-block { padding: 10px; } .comment-section { padding: 20px; } </style>
既然我们的数据是共享的，所以我们需要把数据存在 store 里
我们在src下创建个目录为 store
在 store 下分别创建4个js文件 actions.js , index.js , mutation-types.js , mutations.js
看名字也就知道这4个分别是做啥用的了，建议大家多阅读阅读 vuex 的文档，多姿势多动手实践，慢慢的也就能理解了。