单页面搭建后台模板

router => index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

import Vue from 'vue' import Router from 'vue-router' import TOP from '@/components/top.vue'   Vue.use(Router)   export default new Router({   routes: [     {       path:'/',       components:{         top:TOP,         bottom:()=> import ('../components/bottom.vue')       }     },     {       path:'/b2',       components:{         top:TOP,         bottom:()=> import('../components/bottom2.vue')       }     }   ] })

　架构：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>     <div>       <h1>我是上边的组件</h1>       <a @click="goB2">b2</a>       <a @click="goB1">b1</a>     </div>   </template> <script> export default {     methods:{         goB1(){             this.$router.push('/');         },         goB2(){             this.$router.push('b2');         }     } } </script>

　　bottom2 && bottom

?

1 2 3

<template>     <h1>我是下边的第二个组件</h1> </template>

 

?

1 2 3

<template>     <h1>我是下边的组件</h1> </template>

　　效果图：