Router不嵌套路由 而是并列的路由怎么写，请你帮我写一个页面，这个页面有两个块 同级的，都是通过router-view展示的两个组件，但是这两个块中路由地址不同/home和/adout，所以这个页面会展示两个组件的视图 请写出代码并解释

在Vue.js中，如果你想要在同一页面上并列展示两个`router-view`组件，并且它们对应不同的路由地址 `/home` 和 `/about`，你可以这样做：

首先，在你的`.vue`文件里（假设这是一台名为`Parent.vue`的组件），创建一个包含两个`router-view`的布局结构：

<template>
  <div class="parent-page">
    <router-view :name="viewOne" class="block-one"></router-view>
    <router-view :name="viewTwo" class="block-two"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewOne: 'home',
      viewTwo: 'about'
    };
  },
  // 其他生命周期钩子、methods等...
};
</script>

<style>
.parent-page {
  display: flex;
  flex-direction: row;
}

.block-one,
.block-two {
  flex: 1; /* 自适应宽度 */
}
</style>

在这个例子中，`data`部分定义了两个`router-view`对应的默认名称。`viewOne`初始化为`home`，`viewTwo`初始化为`about`。当你导航到`/home`或`/about`时，Vue Router会自动匹配相应的组件。

然后，在`main.js`或其他Vue应用配置文件中，你需要设置路由规则：

import Vue from 'vue';
import App from './App.vue';
import HomeComponent from '@/components/Home.vue'; // 假设HomeComponent是你/home路由的组件
import AboutComponent from '@/components/About.vue'; // 假设AboutComponent是你/about路由的组件

// 注册路由
const routes = [
  { path: '/home', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

new Vue({
  router: {
    routes
  },
  render: h => h(App)
}).$mount('#app');

现在，当用户访问`/home`或`/about`路径时，对应的组件会在各自的`router-view`区域显示。如果需要动态切换显示的视图，可以在适当的地方更改`viewOne`和`viewTwo`的值。