### 单页面多路由 和 嵌套路由的区别  # 单页面多路由区域操作 * 主要就是实现在一个页面内显示多个组件 ## 使用 * 我们现在的需求就是在首页显示多个组件。那么该怎么做 ## 使用步骤 * 第一步在要使用的页面内添加 多个router-view ~~~xml <router-view></router-view> <router-view name="left" style="width:50%;height:400px;background:red;float:left"></router-view> <router-view name="right" style="width:50%;height:400px;background:blue;float:left;"></router-view> ~~~ > 这里特别注意的就是 router-view必须要有name属性 * 第二步 在路由里面设置components属性注意一定要加S ~~~tsx import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', //这里就是要加载你要显示的组件 对应name components: { default: HelloWorld, left: Hi1, right: Hi2, } }, { path:'/hi', name:"Hi", component:Hi, children:[ {path:"hi1",name:"Hi1",component:Hi1}, {path:"hi2",name:"Hi2",component:Hi2}, ] } ] }) ~~~