diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue
index 262866f8d..8ed252db3 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -2,18 +2,18 @@
   <transition name="slide">
     <nav v-if="visible" class="menu">
       <div class="menu-item-container">
-        <div class="menu-item selected">
+        <router-link class="menu-item" exact-active-class="selected" to="/">
           <i class="menu-item-icon fas fa-hashtag"></i>
-          <router-link class="menu-item-text" to="/">话题</router-link>
-        </div>
-        <div class="menu-item">
+          <span class="menu-item-text">话题</span>
+        </router-link>
+        <router-link class="menu-item" exact-active-class="selected" to="/message">
           <i class="menu-item-icon fas fa-envelope"></i>
-          <router-link class="menu-item-text" to="/">我的消息</router-link>
-        </div>
-        <div class="menu-item">
+          <span class="menu-item-text">我的消息</span>
+        </router-link>
+        <router-link class="menu-item" exact-active-class="selected" to="/about">
           <i class="menu-item-icon fas fa-info-circle"></i>
-          <router-link class="menu-item-text" to="/">关于</router-link>
-        </div>
+          <span class="menu-item-text">关于</span>
+        </router-link>
       </div>
     </nav>
   </transition>
diff --git a/open-isle-cli/src/router/index.js b/open-isle-cli/src/router/index.js
index 52ba8588b..9da117ffe 100644
--- a/open-isle-cli/src/router/index.js
+++ b/open-isle-cli/src/router/index.js
@@ -1,11 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomePageView from '../views/HomePageView.vue'
+import MessagePageView from '../views/MessagePageView.vue'
+import AboutPageView from '../views/AboutPageView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: HomePageView
+  },
+  {
+    path: '/message',
+    name: 'message',
+    component: MessagePageView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: AboutPageView
   }
 ]
 
diff --git a/open-isle-cli/src/views/AboutPageView.vue b/open-isle-cli/src/views/AboutPageView.vue
new file mode 100644
index 000000000..f87810512
--- /dev/null
+++ b/open-isle-cli/src/views/AboutPageView.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="about-page">
+    关于页面内容
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AboutPageView'
+}
+</script>
+
+<style scoped>
+.about-page {
+  padding: 20px;
+}
+</style>
diff --git a/open-isle-cli/src/views/MessagePageView.vue b/open-isle-cli/src/views/MessagePageView.vue
new file mode 100644
index 000000000..8983122ba
--- /dev/null
+++ b/open-isle-cli/src/views/MessagePageView.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="message-page">
+    消息页内容
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessagePageView'
+}
+</script>
+
+<style scoped>
+.message-page {
+  padding: 20px;
+}
+</style>