添加 /chat 路由及其相关的页面 views/chat 模块

src/router/chat.js

@@ -0,0 +1,17 @@
+const Chat = () => import('views/chat/Chat')
+const ChatIndex = () => import('views/chat/ChatIndex')
+
+export default {
+  path: '/chat',
+  name: 'Chat',
+  component: Chat,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: 'ChatIndex',
+      component: ChatIndex,
+      meta: { needAuth: true }
+    }
+  ]
+}

src/router/index.js

@@ -10,6 +10,7 @@ import ChartRouter from './chart'
 import GeoRouter from './geo'
 import SearchRouter from './search'
 import DiskRouter from './disk'
+import ChatRouter from './chat'
 import NewsRouter from './news'
 import AdminRouter from './admin'
 
@@ -50,6 +51,7 @@ const routes = [
   GeoRouter,
   SearchRouter,
   DiskRouter,
+  ChatRouter,
   NewsRouter,
   AdminRouter,
   {

src/views/chat/Chat.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-row class="el-menu-demo">
+        <el-col :md="2">
+          <ul role="menubar" class="el-menu--horizontal el-menu">
+            <li role="menuitem" class="el-menu-item">
+              <a href="/chat" style="color: #007bff;text-decoration-line: none">
+                <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+                chat
+              </a>
+            </li>
+          </ul>
+        </el-col>
+        <el-col :md="20">
+          <el-menu
+            class="el-menu--horizontal el-menu"
+            :default-active="this.$route.path"
+            router
+            mode="horizontal"
+          >
+          </el-menu>
+        </el-col>
+        <el-col :md="2">
+          <ul class="el-menu--horizontal el-menu">
+            <li class="el-menu-item">
+              <el-dropdown v-if="user">
+                <img
+                  :src="user.avatarUrl"
+                  class="el-avatar--circle el-avatar--medium"
+                  style="margin-right: 10px; margin-top: 15px"
+                  alt=""
+                >
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item
+                    icon="el-icon-s-platform"
+                    class="size"
+                    @click.native="backToHome"
+                  >回到主站</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-error"
+                    class="size"
+                    @click.native="logout"
+                  >登出</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <span
+                v-else
+                style="color: #007bff"
+              >登入</span>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'Chat',
+  data() {
+    return {
+      user: null
+    }
+  },
+  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = 'chat'
+    this.user = getAuthedUser()
+  },
+  methods: {
+    backToHome() {
+      const path = '/'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    logout() {
+      this.$message.info('logout')
+    }
+  }
+}
+</script>
+
+<style>
+.logo {
+  width: 30px;
+  position: relative;
+}
+</style>

src/views/chat/ChatIndex.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span>chat index</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ChatIndex',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = 'chat'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    }
+  }
+}
+</script>
+
+<style>
+</style>