通过Vue-cil搭建项目

页面结构简单 header，middle，footer上中下，header是导航栏分为列表和新增，middle呈现内容，footer是摆设，

router配置：

//引入和使用省略

export default new Router({
    mode: "history",
    routes: [{
        path: '/',
        name: 'Main',
        redirect: { name: 'list' }
    }, {
        path: '/add',
        name: 'add',
        component: Add
    }, {
        path: '/list',
        name: 'list',
        component: List
    }]
})

header.vue

    
        
            列表
        
    
    
        新增
    

middle.vue

1.点击导航栏渲染的问题：

渲染会把整个页面都渲染了  而通过我的代码也能知道我意图，是打算渲染middle那个组件，
解决：没有把Vue-router挂载到我打算转发的组件上

修改main.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(Main)//这里原来是初始配置的App
})