单页面多路由

vue提供的路由非常方便我们把页面分开成几个部分分别操作，下面就动手简单做一个

第一步：在App.vue中加两个路由，为了方便看效果，简单分别给他们写个内联样式

<router-view></router-view>
<router-view name = "right" style="background-color:red;width:50%;height:100px;float:right"></router-view>
<router-view name = "left" style="background-color:black;width:50%;height:100px;float:left"></router-view>

注意只能有一个路由不写name，他是默认值defaut

---

第二步：在index.js配置路由，import就不多说了，只要加路由必须写import才能生效

{
      path: '/',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        right:Hi1,
        left:Hi2
      }
    }

注意这里的坑，要把component改成components,conponents对象里的都没有引号

---

至此，单页面多路由我们就做出来了，但是再深化一下，我们再加个导航，实现让两个路由调换一下位置，这主要是之前的知识，直接放一下代码

index.js

{
     path: '/Hi',
     name: 'Hi',
     components: {
       default:Hi,
       right:Hi2,
       left:Hi1
     }

App.vue

<div>
    <router-link to="/">首页</router-link>|
    <router-link to="/Hi">Hi</router-link>
</div>

结果图：