创建路由组件
views/advert/index.vue
广告管理views/advert-space/index.vue
广告位管理views/course/index.vue
课程管理views/error-page/index.vue
404views/home/index.vue
首页views/login/index.vue
用户登录views/menu/index.vue
菜单管理views/resource/index.vue
资源管理views/role/index.vue
角色管理views/user/index.vue
用户管理
示例
src/views/advert/index.vue:
<template>
<div class="advert">广告管理</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'AdvertIndex'
})
</script>
<style lang="scss" scoped></style>
配置路由地址
router/index.ts:
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
Vue.use(VueRouter)
// 路由配置规则
const routes: Array<RouteConfig> = [
{
// 首页
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
},
{
// 用户登录
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
},
{
// 课程管理
path: '/course',
name: 'course',
component: () => import(/* webpackChunkName: 'course' */ '@/views/course/index.vue')
},
{
// 菜单管理
path: '/menu',
name: 'menu',
component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
},
{
// 资源管理
path: '/resource',
name: 'resource',
component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
},
{
// 角色管理
path: '/role',
name: 'role',
component: () => import(/* webpackChunkName: 'role' */ '@/views/role/index.vue')
},
{
// 用户管理
path: '/user',
name: 'user',
component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
},
{
// 广告管理
path: '/advert',
name: 'advert',
component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
},
{
// 广告位管理
path: '/advert-space',
name: 'advert-space',
component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
},
{
// 404
path: '*',
name: '404',
component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
}
]
const router = new VueRouter({
routes
})
export default router
测试
<template>
<div class="advert">广告管理</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'AdvertIndex'
})
</script>
<style lang="scss" scoped></style>
布局分析
红色区域 数据不变(大部分页面),蓝色部分需要获取对应路由数据,就可以使用 父子路由 (嵌套路由)的方式来实现局部路由
创建 src/layout/index.vue:布局组件
<template>
<div>
<div class="layout">布局组件</div>
<!-- 子路由出口 -->
<router-view />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'LayoutIndex'
})
</script>
<style lang="scss" scoped></style>
修改路由配置
router/index.ts:
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
Vue.use(VueRouter)
// 路由配置规则
const routes: Array<RouteConfig> = [
{
// 用户登录
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
},
{
// 嵌套路由
path: '/',
component: Layout,
children: [
{
// 首页
path: '',
name: 'home',
component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
},
{
// 课程管理
path: '/course',
name: 'course',
component: () => import(/* webpackChunkName: 'course' */ '@/views/course/index.vue')
},
{
// 菜单管理
path: '/menu',
name: 'menu',
component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
},
{
// 资源管理
path: '/resource',
name: 'resource',
component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
},
{
// 角色管理
path: '/role',
name: 'role',
component: () => import(/* webpackChunkName: 'role' */ '@/views/role/index.vue')
},
{
// 用户管理
path: '/user',
name: 'user',
component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
},
{
// 广告管理
path: '/advert',
name: 'advert',
component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
},
{
// 广告位管理
path: '/advert-space',
name: 'advert-space',
component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
}
]
},
{
// 404
path: '*',
name: '404',
component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
}
]
const router = new VueRouter({
routes
})
export default router