调整页面路由和数据显示

src/layout/components/head.vue

@@ -46,10 +46,10 @@ export default {
     return {
       userInfo: {},
       headItem: [
-        { icon: 'mdi-account', text: '个人中心', link: '/user', id: 0 },
-        { icon: 'mdi-application', text: '稍后再看', link: '/user/playlist', id: 1 },
-        { icon: 'mdi-application', text: '收藏列表', link: '/user/favlist', id: 2 },
-        { icon: 'mdi-application', text: '历史记录', link: '/user/hislist', id: 3 },
+        { icon: 'mdi-account', text: '个人中心', link: '/user/my', id: 0 },
+        { icon: 'mdi-application', text: '稍后再看', link: '/user/my/playlist', id: 1 },
+        { icon: 'mdi-application', text: '收藏列表', link: '/user/my/favlist', id: 2 },
+        { icon: 'mdi-application', text: '历史记录', link: '/user/my/hislist', id: 3 },
         { icon: 'mdi-application', text: '创作中心', link: '/studio', id: 4 },
         { icon: 'mdi-logout', text: '退出', link: '/logout', id: 5 }
       ]
@@ -61,7 +61,7 @@ export default {
   methods: {
     headClick(value) {
       if (value === 0) {
-        this.$router.push('/user')
+        this.$router.push('/user/home')
         /* this.$router.push('/user/' + this.userInfo.userId)
         location.replace('/user/' + this.userInfo.userId)*/
       } else if (value === 1 && this.$route.path !== '/user/playlist') {

src/layout/index.vue

@@ -99,12 +99,12 @@ export default {
     keyword: '',
     items: [
       { icon: 'mdi-youtube-subscription', text: '直播', link: '/live' },
-      { icon: 'mdi-trending-up', text: '微博', link: '/mblog' },
+      { icon: 'mdi-trending-up', text: '状态', link: '/mblog' },
       { icon: 'mdi-trending-up', text: '知乎', link: '/zhihu' }
     ],
     links: [
       '直播',
-      '微博',
+      '状态',
       '知乎'
     ]
     /*,

src/router/index.js

@@ -105,24 +105,27 @@ const routes = [
           }
         ]
       },
+      {
+        path: '/u/:userId',
+        name: 'UserHome',
+        component: () => import('@/views/user/home.vue'),
+        meta: { title: '用户主页' }
+      },
       {
         path: '/user',
-        name: 'User',
-        component: () => import('@/views/user/index.vue'),
-        meta: { title: '用户中心' },
+        name: 'UserCenter',
+        component: () => import('@/views/user/userindex.vue'),
+        meta: {
+          title: '个人中心',
+          requireAuth: true
+        },
         children: [
           {
-            path: '/u/:userId',
+            path: '/user/home',
             name: 'UserHome',
             component: () => import('@/views/user/home.vue'),
-            meta: { title: '用户主页' }
-          },
-          {
-            path: '/user',
-            name: 'UserSetting',
-            component: () => import('@/views/user/setting.vue'),
             meta: {
-              title: '账户设置',
+              title: '个人中心',
               requireAuth: true
             }
           },
@@ -139,121 +142,133 @@ const routes = [
             path: '/user/favlist',
             name: 'UserFavlist',
             component: () => import('@/views/user/favlist.vue'),
-            meta: { title: '收藏列表' }
+            meta: { title: '收藏列表',
+              requireAuth: true }
           },
           {
             path: '/user/playlist',
             name: 'UserPlaylist',
             component: () => import('@/views/user/playlist.vue'),
-            meta: { title: '稍后再看' }
+            meta: { title: '稍后再看',
+              requireAuth: true }
           },
           {
             path: '/user/hislist',
             name: 'UserHislist',
             component: () => import('@/views/user/hislist.vue'),
-            meta: { title: '历史记录' }
+            meta: { title: '历史记录',
+              requireAuth: true }
           },
           {
             path: '/user/follow',
             name: 'UserFollow',
             component: () => import('@/views/user/follow.vue'),
-            meta: { title: '关注管理' }
+            meta: { title: '关注管理',
+              requireAuth: true }
           },
           {
             path: '/user/vip',
             name: 'UserVip',
             component: () => import('@/views/user/vip.vue'),
-            meta: { title: '小会员' }
+            meta: { title: '小会员',
+              requireAuth: true }
           },
           {
             path: '/user/loginhistory',
             name: 'LoginHistory',
             component: () => import('@/views/user/LoginHistory.vue'),
-            meta: { title: '登录历史' }
+            meta: { title: '登录历史',
+              requireAuth: true }
           }
-          /* {
-            path: '/user/studio',
-            name: 'StudioIndex',
-            component: () => import('@/views/studio/index.vue'),
-            meta: {
-              title: '个人中心',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/upload',
-            name: 'Upload',
-            component: () => import('@/views/studio/upload.vue'),
-            meta: {
-              title: '投稿',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/post',
-            name: 'Post',
-            component: () => import('@/views/studio/post.vue'),
-            meta: {
-              title: '稿件列表',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/comment',
-            name: 'Comment',
-            component: () => import('@/views/studio/comment.vue'),
-            meta: {
-              title: '评论',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/admin/invitation',
-            name: 'invitation',
-            component: () => import('@/views/admin/invitation.vue'),
-            meta: {
-              title: '邀请码',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/admin/examine',
-            name: 'Examine',
-            component: () => import('@/views/admin/examine.vue'),
-            meta: {
-              title: '审核视频',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/admin/userlist',
-            name: 'Examine',
-            component: () => import('@/views/admin/user-list.vue'),
-            meta: {
-              title: '用户列表',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/admin/websetting',
-            name: 'Examine',
-            component: () => import('@/views/admin/web-setting.vue'),
-            meta: {
-              title: '网页设置',
-              requireAuth: true
-            }
-          },
-          {
-            path: '/user/admin/category',
-            name: 'Examine',
-            component: () => import('@/views/admin/category.vue'),
-            meta: {
-              title: '分区设置',
-              requireAuth: true
-            }
-          }*/
         ]
       },
+      /*
+      {
+        path: '/user',
+        name: 'User',
+        component: () => import('@/views/user/index.vue')
+      },
+      {
+          path: '/user/studio',
+          name: 'StudioIndex',
+          component: () => import('@/views/studio/index.vue'),
+          meta: {
+            title: '个人中心',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/upload',
+          name: 'Upload',
+          component: () => import('@/views/studio/upload.vue'),
+          meta: {
+            title: '投稿',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/post',
+          name: 'Post',
+          component: () => import('@/views/studio/post.vue'),
+          meta: {
+            title: '稿件列表',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/comment',
+          name: 'Comment',
+          component: () => import('@/views/studio/comment.vue'),
+          meta: {
+            title: '评论',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/admin/invitation',
+          name: 'invitation',
+          component: () => import('@/views/admin/invitation.vue'),
+          meta: {
+            title: '邀请码',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/admin/examine',
+          name: 'Examine',
+          component: () => import('@/views/admin/examine.vue'),
+          meta: {
+            title: '审核视频',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/admin/userlist',
+          name: 'Examine',
+          component: () => import('@/views/admin/user-list.vue'),
+          meta: {
+            title: '用户列表',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/admin/websetting',
+          name: 'Examine',
+          component: () => import('@/views/admin/web-setting.vue'),
+          meta: {
+            title: '网页设置',
+            requireAuth: true
+          }
+        },
+        {
+          path: '/user/admin/category',
+          name: 'Examine',
+          component: () => import('@/views/admin/category.vue'),
+          meta: {
+            title: '分区设置',
+            requireAuth: true
+          }
+        }*/
       {
         path: '/message',
         name: 'Message',
@@ -290,7 +305,7 @@ const routes = [
         path: '/mblog',
         name: 'Mblog',
         component: () => import('@/views/home/mblog.vue'),
-        meta: { title: 'HerTube 微博' }
+        meta: { title: 'HerTube 状态' }
       },
       {
         path: '/zhihu',

src/views/home/history.vue

@@ -27,7 +27,6 @@
       </v-row>
       <v-row justify="center">
         <v-pagination
-
           v-model="page"
           :length="length"
           @input="pageChange"

src/views/user/home.vue

@@ -139,40 +139,38 @@ export default {
     }
   },
   created() {
-    if (this.$store.state.user.userInfo !== null) {
+    const userIdStr = this.$route.params.userId
+    if (userIdStr === undefined) {
+      // 从"个人中心"加载
       this.loginUserId = this.$store.state.user.userInfo.userId
+      this.userId = this.$store.state.user.userInfo.userId
+      this.userInfo = this.$store.state.user.userInfo
+      document.title = '我的主页'
+    } else {
+      this.userId = parseInt(userIdStr)
+      this.getUserInfo(this.userId)
     }
-    this.userId = parseInt(this.$route.params.userId)
-    this.getUserInfo()
     this.getVideoList()
-    document.title = this.userId + ' 的主页'
   },
   methods: {
-    getUserInfo() {
-      if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.userId === this.userId) {
-        this.userInfo = this.$store.state.user.userInfo
-        document.title = this.userInfo.username
-      } else {
-        console.log('获取用户信息')
-        getUserInfo(this.userId).then(res => {
-          if (res.code === 0) {
-            this.userInfo = res.data
-          } else {
-            alert(res.data)
-          }
-        }).catch(error => {
-          console.error(error.message)
-        })
-      }
+    getUserInfo(userId) {
+      getUserInfo(userId).then(res => {
+        if (res.code === 0) {
+          this.userInfo = res.data
+          document.title = this.userInfo.username + ' 的主页'
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
     },
     getStatusList() {
       console.log('获取状态列表')
     },
     getVideoList() {
-      console.log('获取视频列表')
       userVideoList(this.userId).then(res => {
         if (res.code === 0) {
-          console.log(res.data)
           for (const item of res.data.list) {
             this.videoList.push(item)
           }

src/views/user/index.vue

@@ -1,53 +1,6 @@
 <template>
   <v-container>
     <v-row>
-      <v-col cols="2">
-        <v-sheet rounded="lg">
-          <v-list color="transparent">
-            <router-link :to="`/u/${this.$store.state.user.userInfo.userId}`">
-              <v-row justify="center" align="center">
-                <v-col cols="12" style="text-align: center">
-                  <v-avatar size="62">
-                    <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
-                  </v-avatar>
-                </v-col>
-              </v-row>
-              <v-row justify="center" align="center">
-                <v-col cols="12" style="text-align: center">
-                  {{ this.$store.state.user.userInfo.username }}
-                </v-col>
-              </v-row>
-            </router-link>
-            <router-link v-for="item in items" :key="item.text" :to="item.link">
-              <v-list-item
-                link
-              >
-                <v-list-item-action>
-                  <v-icon>{{ item.icon }}</v-icon>
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ item.text }}
-                  </v-list-item-title>
-                </v-list-item-content>
-              </v-list-item>
-            </router-link>
-
-            <v-divider class="my-2" />
-
-            <v-list-item
-              link
-              color="grey lighten-4"
-            >
-              <v-list-item-content>
-                <v-list-item-title>
-                  Refresh
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list>
-        </v-sheet>
-      </v-col>
       <v-col>
         <v-sheet
           min-height="70vh"
@@ -61,29 +14,8 @@
 </template>
 
 <script>
-import CheckPower from '@/utils/check-power.vue'
-
 export default {
   data: () => ({
-    CheckPower,
-    items: [
-      { icon: 'mdi-wrench', text: '账户设置', link: '/user/setting' },
-      { icon: 'mdi-account-multiple', text: '收藏列表', link: '/user/favlist' },
-      { icon: 'mdi-account-multiple', text: '稍后再看', link: '/user/playlist' },
-      { icon: 'mdi-account-multiple', text: '历史记录', link: '/user/hislist' },
-      { icon: 'mdi-account-multiple', text: '关注管理', link: '/user/follow' },
-      { icon: 'mdi-account-multiple', text: '小会员', link: '/user/vip' },
-      { icon: 'mdi-account-multiple', text: '登录历史', link: '/user/loginhistory' }
-    ],
-    adminList: [
-      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
-      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
-      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
-      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
-      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
-      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
-      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
-    ]
   }),
   mounted() {
   },

src/views/user/userindex.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="2">
+        <v-sheet rounded="lg">
+          <v-list color="transparent">
+            <router-link v-for="item in items" :key="item.text" :to="item.link">
+              <v-list-item
+                link
+              >
+                <v-list-item-action>
+                  <v-icon>{{ item.icon }}</v-icon>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.text }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </router-link>
+
+            <v-divider class="my-2" />
+
+            <v-list-item
+              link
+              color="grey lighten-4"
+            >
+              <v-list-item-content>
+                <v-list-item-title>
+                  Refresh
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-sheet>
+      </v-col>
+      <v-col>
+        <v-sheet
+          min-height="70vh"
+          rounded="lg"
+        >
+          <router-view />
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import CheckPower from '@/utils/check-power.vue'
+
+export default {
+  data: () => ({
+    CheckPower,
+    items: [
+      { icon: 'mdi-wrench', text: '个人主页', link: '/user/home' },
+      { icon: 'mdi-wrench', text: '账户设置', link: '/user/setting' },
+      { icon: 'mdi-account-multiple', text: '收藏列表', link: '/user/favlist' },
+      { icon: 'mdi-account-multiple', text: '稍后再看', link: '/user/playlist' },
+      { icon: 'mdi-account-multiple', text: '历史记录', link: '/user/hislist' },
+      { icon: 'mdi-account-multiple', text: '关注管理', link: '/user/follow' },
+      { icon: 'mdi-account-multiple', text: '小会员', link: '/user/vip' },
+      { icon: 'mdi-account-multiple', text: '登录历史', link: '/user/loginhistory' }
+    ],
+    adminList: [
+      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
+      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
+      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
+      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
+      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
+      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
+      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
+    ]
+  }),
+  mounted() {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+</style>

src/views/video/video.vue

@@ -34,13 +34,16 @@
           <v-divider />
           <v-row>
             <v-col>
-              标签：
+              <span v-text="videoData.description"></span>
+            </v-col>
+          </v-row>
+          <v-divider />
+          <v-row>
+            <v-col>
               <span v-for="item in videoData.tags" :key="item">
                 <!-- TODO 点击标签 button 时请求后端返回具有相同标签的所有视频并在新页面显示 -->
                 <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
-              </span><br>
-              <br>
-              <span v-text="videoData.desc"></span>
+              </span>
             </v-col>
           </v-row>
           <v-divider />