单页面多路由区域操作

单页面多路由区域操作

教程来自jspang：https://www.jspang.com/

在实际的开发中，经常有这样的需求，在一个单页面上，我们需要多个路由区域，根据不同的路由地址来在不同的区域展示不同的组件，这就是 单页面多路由。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
    <router-view class="right"></router-view>
    <router-view class="left"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.right {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #ccc;
}

.left {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #c0c;
}
</style>

在 App.vue 这个单页面组件中，我们有两个 <router-view>，如何区分不同的 <router-view> 并向其中添加组件呢？这就需要用到 <router-view> 中的 name 属性。

<router-view name="right" class="right"></router-view>
<router-view name="left" class="left"></router-view>

然后在路由配置文件中，就可以通过 name 属性区分不同的路由区域：

import Vue from 'vue';
import Router from 'vue-router';
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: 'Hello',
            components: {
                default: Hi,
                left: Hi1,
                right: Hi2,
            },
        },
        {
            path: '/qian',
            name: 'Hello',
            components: {
                default: Hi,
                left: Hi2,
                right: Hi1,
            }
        }
    ]
})

以下是运行结果：