单页应用
新建侧边导航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"/>
