效果

项目目录

项目实现代码：

todolist.vue

<template>
    <div class="home">
        <mHeader @addtodo="addtodo"></mHeader>
        <mTab :todoListLength="todoListLength" :doneListLength="doneListLength"></mTab>
        <router-view :todoList="todoList" :doneList="doneList" @del="del"/>
    </div>
</template>

<script>
//引入头部
import mHeader from './pages/mHeader'
//引入导航栏
import mTab from './pages/mTabbar'
export default {
    name:'home',
    components:{
        mHeader,
        mTab
    },
    data(){
        return{
            todoList:[
                {id:1,content:'todo-1'},
                {id:2,content:'todo-2'},
                {id:3,content:'todo-3'},
                {id:4,content:'todo-4'},
                {id:5,content:'todo-5'}
            ],
            doneList:[]
        }
    },
    computed:{
        todoListLength(){  //计算代办
            return this.todoList.length
        },
        doneListLength(){ //计算完成
            return this.doneList.length
        }
    },
    methods:{
        addtodo(val){
            if(this.todoList == 0){
                var obj = {
                    id:1,
                    content:val
                }
                this.todoList.push(obj)
            }else{
                var obj1 = {
                    id:this.todoList[this.todoList.length-1]+1,
                    content:val
                }
                this.todoList.push(obj1)
            }
        },
        del(index){
            if(confirm("确定完成了吗？")){
                var obj = this.todoList.splice(index,1)
                this.doneList.push(obj[0])
            }
        }
    }
}
</script>

<style>

</style>

mHeader.vue

<template>
    <div class="header">
        <div class="row">
           <div class="col-xs-8">
               <input type="text" class="form-control" placeholder="输入代办" v-model="todoItem">
           </div>
           <div class="col-xs-4">
               <button class="btn btn-info" type="button" @click="addtodo">添加</button>
           </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'mHeader',
    data(){
        return {
            todoItem:''
        }
    },
    methods:{
        addtodo(){
            if(this.todoItem!=0){
                this.$emit('addtodo',this.todoItem)
                this.todoItem = ""
            }else{
                alert('请输入代办')
            }
        }
    }
}
</script>

<style scoped>
.header{
    padding: 6px 12px;
}
</style>

mTabbar.vue

<template>
    <div class="tabs">
      <ul>
          <li>
              <router-link to="/todo">
                未完成
                <span class="badge">{{todoListLength}}</span>
              </router-link>
          </li>
          <li>
              <router-link to="/done">
                完成
                <span class="badge">{{doneListLength}}</span>
              </router-link>
          </li>
      </ul>
    </div>
</template>

<script>
export default {
    name:'tabs',
    props:['todoListLength','doneListLength']
}
</script>

<style scoped>

.tabs{
    padding: 6px 12px;
}
.tabs ul{
    display: flex;
    margin: 0;
    padding: 0;
}
.tabs ul li{
    list-style: none;
    flex: 1;
    text-align: center;
    padding: 6px;
    border-bottom: 1px solid #ddd;
}
</style>

<template>
    <div class="done">
        <ul class="list-group"  v-if="toggle">
            <li 
                class="list-group-item" 
                v-for="(item , index) in doneList" 
                :key="index"
            >
                {{item.content}}
            </li>
        </ul>
         <div v-else>
            暂无完成事项...
        </div>
    </div>
</template>

<script>
export default {
    name:'done',
    data(){
        return {
            isShow:false
        }
    },
    props:['doneList'],
    computed:{
        toggle(){
            return this.doneList.length>0?this.isShow=true:this.isShow=false
        }
    }
}
</script>

<style>

</style>

todo.vue

<template>
    <div class="todo">
        <ul class="list-group">
            <li 
                class="list-group-item"
                v-for="(item,index) in todoList"
                :key="index"
                @click="del(index)"
            >
            {{item.content}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'todo',
    props:['todoList'],
    methods:{
        del(index){
            this.$emit('del',index)
        }
    }
}
</script>

<style>

</style>

index.js 路由规则

import Vue from 'vue'
import Router from 'vue-router'
//一级路由
import mHone from '@/components/home/todolist'
//二级路由
import done from '@/components/home/pages/done'
import todo from '@/components/home/pages/todo'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      redirect:'/todo',
      component: mHone,
      children:[
        {
          path:'done',
          name:'done',
          component:done
        },
        {
          path:'todo',
          name:'todo',
          component:todo
        },
      ]
    },

  ]
})

小结：

1. 注意父子组件的传值，不要搞乱了。
2. 注意路由规则的配置
3. 注意项目目录结构的分类管理