更新前台页面的导航栏

src/App.vue

@@ -1,8 +1,7 @@
 <template>
   <div id="app">
     <!--导航栏-->
-    <nav-bar v-if="type===1" />
-    <post-bar v-else-if="type===2" />
+    <!--    <nav-bar v-if="type===1" />-->
     <!--下面的部分通过路由动态决定渲染与否-->
     <!--exclude,其值为正则，匹配到的组件的名称会被排除在keep-alive之外-->
     <keep-alive exclude="Collection,History">
@@ -16,16 +15,12 @@
 </template>
 
 <script>
-import NavBar from 'components/layout/NavBar'
-import PostBar from 'components/layout/PostBar'
 import FooterBar from 'components/layout/FooterBar'
 
 export default {
   name: 'App',
   components: {
-    FooterBar,
-    NavBar,
-    PostBar
+    FooterBar
   },
   data() {
     return {

src/router/index.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
 // 应用主页
+const Index = () => import('views/Index')
 const Home = () => import('views/home/Index')
 const TimelineIndex = () => import('views/home/Timeline')
 const VideoIndex = () => import('views/home/Video')
@@ -400,156 +401,163 @@ const routes = [
     component: PostEditArticle,
     meta: { needAuth: true }
   },
-
   {
     path: '/',
-    name: 'index',
-    component: Home,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/video',
-    name: 'VideoIndex',
-    component: VideoIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/shortvideo',
-    name: 'ShortVideoIndex',
-    component: ShortVideoIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/video/:id',
-    name: 'VideoPage',
-    component: VideoPage,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/vidlist/:id',
-    name: 'VideoList',
-    component: VideoList,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/audio',
-    name: 'AudioIndex',
-    component: AudioIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/audio/:audioId',
-    name: 'AudioPage',
-    component: AudioPage,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/image',
-    name: 'ImageIndex',
-    component: ImageIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/image/album/:albumId',
-    name: 'ImagePage',
-    component: ImagePage,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/article',
-    name: 'ArticleIndex',
-    component: ArticleIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/stream',
-    name: 'MessageStream',
-    component: MessageStream,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/article/:articleId',
-    name: 'ArticlePage',
-    component: ArticlePage,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/discover',
-    name: 'DiscoverIndex',
-    component: DiscoverIndex,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/search',
-    name: 'search',
-    component: Search,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id',
-    name: 'UserHome',
-    component: UserHome,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/video',
-    name: 'UserVideo',
-    component: UserVideo,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/image',
-    name: 'UserImage',
-    component: UserImage,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/audio',
-    name: 'UserAudio',
-    component: UserAudio,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/article',
-    name: 'UserArticle',
-    component: UserArticle,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/following',
-    name: 'UserRelation',
-    component: UserRelation,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/user/:id/follower',
-    name: 'UserRelation',
-    component: UserRelation,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/map',
-    name: 'AMap',
-    component: AMap,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/bdmap',
-    name: 'BdMap',
-    component: BdMap,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/amap',
-    name: 'AMap',
-    component: AMap,
-    meta: { needAuth: false }
-  },
-  {
-    path: '/vip',
-    name: 'Vip',
-    component: Vip,
-    meta: { needAuth: false }
+    name: 'Index',
+    component: Index,
+    meta: { needAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: Home,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/video',
+        name: 'VideoIndex',
+        component: VideoIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/shortvideo',
+        name: 'ShortVideoIndex',
+        component: ShortVideoIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/video/:id',
+        name: 'VideoPage',
+        component: VideoPage,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/vidlist/:id',
+        name: 'VideoList',
+        component: VideoList,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/audio',
+        name: 'AudioIndex',
+        component: AudioIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/audio/:audioId',
+        name: 'AudioPage',
+        component: AudioPage,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/image',
+        name: 'ImageIndex',
+        component: ImageIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/image/album/:albumId',
+        name: 'ImagePage',
+        component: ImagePage,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/article',
+        name: 'ArticleIndex',
+        component: ArticleIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/stream',
+        name: 'MessageStream',
+        component: MessageStream,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/article/:articleId',
+        name: 'ArticlePage',
+        component: ArticlePage,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/discover',
+        name: 'DiscoverIndex',
+        component: DiscoverIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/search',
+        name: 'search',
+        component: Search,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id',
+        name: 'UserHome',
+        component: UserHome,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/video',
+        name: 'UserVideo',
+        component: UserVideo,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/image',
+        name: 'UserImage',
+        component: UserImage,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/audio',
+        name: 'UserAudio',
+        component: UserAudio,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/article',
+        name: 'UserArticle',
+        component: UserArticle,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/following',
+        name: 'UserRelation',
+        component: UserRelation,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/user/:id/follower',
+        name: 'UserRelation',
+        component: UserRelation,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/map',
+        name: 'AMap',
+        component: AMap,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/bdmap',
+        name: 'BdMap',
+        component: BdMap,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/amap',
+        name: 'AMap',
+        component: AMap,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/vip',
+        name: 'Vip',
+        component: Vip,
+        meta: { needAuth: false }
+      }
+    ]
   },
   {
     path: '/login',

src/views/Index.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-container>
+    <el-main>
+      <nav-bar />
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import NavBar from 'components/layout/NavBar'
+
+export default {
+  name: 'Index',
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      isCollapse: false,
+      navList: [
+        { path: '/my/account', name: '我的帐号', icon: 'el-icon-upload' }
+      ]
+    }
+  },
+  /*  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },*/
+  created() {
+    document.title = 'tnb'
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 800px;
+}
+
+#aside-style {
+  min-width: 120px;
+  max-width: 240px;
+  width: 30%;
+}
+</style>