基础功能设置
初始化路由页面组件
在views目录中创建路由页面组件，设置方式：
- 每个页面组件设置独立的目录，内部的index.vue为默认组件，如果有页面中还有其他的组件时，比如新建等功能，在index.vue的同级再创建新的文件就可以了，如果要拆分子组件，可以在index.vue同级创建components目录存储
- login与error-page对应一级路由，而user、menu等其他组件对应二级路由，这个时候单独创建layout组件用来设置后台常规页面的一级路由，这样以来App.vue中只设置跟路由出口就可以了
views目录如下：
├── advert 广告管理
│ └── index.vue
├── advert-space 广告位管理
│ └── index.vue
├── course 课程管理
│ └── index.vue
├── error-page 错误页面
│ └── index.vue
├── home 主页
│ └── index.vue
├── layout 布局组件
│ └── index.vue
├── login 登录
│ └── index.vue
├── menu 菜单管理
│ └── index.vue
├── resource 资源管理
│ └── index.vue
├── role 角色管理
│ └── index.vue
└── user 用户管理
└── index.vue
配置路由规则
在router/index.js中定义路由规则，传统方式需要先引入每个组织模块，再进行路由规则的设置
- 一级路由有：login，layout，error-page
- error-page设置path为'*'，用于匹配未知路由地址显示404页面
- 剩余的组件均设置在layout的二级路由，其中home为layout的默认路由组件
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入对应组件需要的路由规则
import Login from '@/views/login/index'
import Layout from '@/views/layout/index'
import Home from '@/views/home/index'
import Role from '@/views/role/index'
import Menu from '@/views/menu/index'
import Resource from '@/views/resource/index'
import Course from '@/views/course/index'
import User from '@/views/user/index'
import Advert from '@/views/advert/index'
import AdvertSpace from '@/views/advert-space/index'
import ErrorPage from '@/views/error-page/index'
Vue.use(VueRouter)
// 路由规则
const routes = [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/',
component: Layout,
children: [
{
path: '',
name: 'home',
component: Home
},
{
path: '/role',
name: 'role',
component: Role
},
{
path: '/menu',
name: 'menu',
component: Menu
},
{
path: '/resource',
name: 'resource',
component: Resource
},
{
path: '/course',
name: 'course',
component: Course
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/advert',
name: 'advert',
component: Advert
},
{
path: '/advert-space',
name: 'advert-space',
component: AdvertSpace
}
]
},
{
path: '*',
name: 'error-page',
component: ErrorPage
}
]
const router = new VueRouter({
routes
})
export default router
功能优化
使用npm run build命令，webpack打包的时候，所有的组件都会打包到一起，会让JavaScript的包变得非常的大
这就是打包情况
打包情况
所以说如果我们要解决这个问题，就应该进行组件加载的优化，比如说设置一下路由懒加载，这个时候就可以使用import()（mdn、vue）来进行模块动态加载，模块（和子模块）会分割到单独的chunk中；方法返回的Promise对象设置给component，这种组合只有在被需要的时候才会被Vue执行和渲染，通过上面的处理之后呢，就可以达到优化项目加载速度的目的啦
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由规则
const routes = [
{
path: '/login',
name: 'login',
component: () => import('@/views/login/index')
},
{
path: '/',
component: () => import('@/views/layout/index'),
children: [
{
path: '',
name: 'home',
component: () => import('@/views/home/index')
},
{
path: '/role',
name: 'role',
component: () => import('@/views/role/index')
},
{
path: '/menu',
name: 'menu',
component: () => import('@/views/menu/index')
},
{
path: '/resource',
name: 'resource',
component: () => import('@/views/resource/index')
},
{
path: '/course',
name: 'course',
component: () => import('@/views/course/index')
},
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index')
},
{
path: '/advert',
name: 'advert',
component: () => import('@/views/advert/index')
},
{
path: '/advert-space',
name: 'advert-space',
component: () => import('@/views/advert-space/index')
}
]
},
{
path: '*',
name: 'error-page',
component: () => import('@/views/error-page/index')
}
]
const router = new VueRouter({
routes
})
export default router
打包时每个路由页面组件都会存储在chunk中，每个路由组建只有在被访问到的时候才会加载，具体的效果是这样的：
每当我访问一个新的组件才会新加载一个
通过上述操作可以发现chunk的名称都是编号形式，没有实际的语义。webpack允许通过魔法注释给chunk定义名称，提高可读性
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由规则
const routes = [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: 'login' */'@/views/login/index')
},
{
path: '/',
component: () => import(/* webpackChunkName: 'layout' */'@/views/layout/index'),
children: [
{
path: '',
name: 'home',
component: () => import(/* webpackChunkName: 'home' */'@/views/home/index')
},
{
path: '/role',
name: 'role',
component: () => import(/* webpackChunkName: 'role' */'@/views/role/index')
},
{
path: '/menu',
name: 'menu',
component: () => import(/* webpackChunkName: 'menu' */'@/views/menu/index')
},
{
path: '/resource',
name: 'resource',
component: () => import(/* webpackChunkName: 'resource' */'@/views/resource/index')
},
{
path: '/course',
name: 'course',
component: () => import(/* webpackChunkName: 'course' */'@/views/course/index')
},
{
path: '/user',
name: 'user',
component: () => import(/* webpackChunkName: 'user' */'@/views/user/index')
},
{
path: '/advert',
name: 'advert',
component: () => import(/* webpackChunkName: 'advert' */'@/views/advert/index')
},
{
path: '/advert-space',
name: 'advert-space',
component: () => import(/* webpackChunkName: 'advert-space' */'@/views/advert-space/index')
}
]
},
{
path: '*',
name: 'error-page',
component: () => import(/* webpackChunkName: 'error-page' */'@/views/error-page/index')
}
]
const router = new VueRouter({
routes
})
export default router
都有了可读性的前缀名称
以上，路由处理完成
网友评论