初始化路由组件

在 views ⽬录下创建以下⽬录与⽂件，并进⾏初始内容设置。

路由处理 - 图1

配置路由规则

// 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:‘/‘, name:‘course’, component: () =>import(/ webpackChunkName: ‘course’ /‘@/views/course/index’) }, // 学习页 { path:‘/learn’, name:‘learn’, component: () =>import(/ webpackChunkName: ‘learn’ /‘@/views/learn/index’), }, // 用户页 { path:‘/user’, name:‘user’, component: () =>import(/ webpackChunkName: ‘user’ /‘@/views/user/index’), }, { path:‘*’, name:‘error-page’, component: () =>import(/ webpackChunkName: ‘error-page’ /‘@/views/error-page/index’) } ] const router = new VueRouter({ routes }) export default router