初始化路由⻚⾯组件

在 views ⽬录中创建路由⻚⾯组件，设置⽅式如下： 每个⻚⾯组件设置独⽴⽬录，内部的 index.vue 为默认组件，如果当前⻚⾯还有其他组件，例如新建等功能，在 index.vue 同级设置即可。如果要拆分⼦组件，可以在 index.vue 同级创建 components⽬录存储。 login 与 error-page 对应⼀级路由，⽽ user、menu 等其他组件对应⼆级路由，这时单独创建 layout 组件⽤来设置后台常规⻚⾯的⼀级路由，这样 App.vue 中只设置根路由出⼝即可。

路由处理-基础功能设置 - 图1

配置路由规则

在 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’ 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’,20 name: ‘user’, component: User }, { path: ‘/advert’, name: ‘advert’, component: Advert }, { path: ‘/advert-space’, name: ‘advert-space’, component: AdvertSpace } ] }, { path: ‘*’, name: ‘error-page’, component: () => import(/ webpackChunkName: ‘error-page’ /‘@/views/error-page/index’) } ] const router = new VueRouter({ routes }) export default router