单页应用

新建侧边导航Aside.vue文件。导航使用的Element UI框架。

<template>
  <el-aside width="200px">
    <!-- this.$route.path当前路由，router使用vue-router的模式 -->
    <el-menu :default-active="this.$route.path" router style="height: 100%;">
      <!-- v-for循环 -->
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <!-- 动态绑定class -->
        <i :class="item.icon"></i>
        <span slot="title">{{ item.navItem }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'Aside',
  data () {
    return {
      navList: [
        {
          name: '/',
          navItem: '首页',
          icon: 'el-icon-view'
        },
        {
          name: '/edit',
          navItem: '编辑',
          icon: 'el-icon-edit'
        }
      ]
    }
  }
}
</script>

路由

src/router/index.js中插入注释代码：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'

import Aside from '@/components/Aside' //引入aside.vue单页应用

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Main,
        Aside: Aside  //添加到路由中
      }
    }
  ]
})

插入

在App.vue中，插入单页应用：

<router-view name="Aside"/>