Vue3+webpack项目的vue-router路由封装

首先安装路由依赖组件：

npm install vue-router@4

Vue的路由封装需要用到的文件如下图：

图1

主要用到的文件有：

【./src/views】文件夹及其文件夹下的文件；

【./src/router】文件夹及其文件夹下的文件；

【./src/index.js】和【./src/App.vue】；

views文件夹：用来放页面代码页面模块的。

views文件夹下有admin和webroot这两个文件夹，也是将此项目分为了两个模块，每一个模块都有自己独立的路由文件，这样便于项目的后期扩展开发和维护。

admin文件夹：文件夹下放的是项目后台管理页面的相关代码；

admin文件夹下的index.vue文件代码：

<template>

<div>月影WEB-后台管理页面</div>

<div>

<router-view></router-view>

</div>

</template>

<script>

export default {

name:"月影WEB-后台管理页面",

}

</script>

admin文件夹下的【/lists/lists.vue】文件代码：

<template>

<div>

月影WEB-后台管理页面--列表页面

</div>

</template>

<script>

export default {

}

</script>

<style>

</style>

其余的三个文件：

【/admin/details/details.vue】

【/webroot/lists/lists.vue】

【/webroot/details/details.vue】

的代码和

【/admin/lists/lists.vue】

这个文件中的代码类似，只需要改一下显示的文字即可；

webroot文件夹：文件夹下放的是项目前端展示页面的相关代码；

webroot文件夹下的index.vue文件代码：

<template>

<div>月影WEB-前端展示页面</div>

<div>

<router-view></router-view>

</div>

</template>

<script>

export default {

name:"月影WEB-前端展示页面",

}

</script>

这样路由所需要的页面代码就准备好了，接下去就是将写好的页面放入封装的路由中。

router文件夹：是用来封装路由用的。

router文件夹下的index.js：

import { createRouter,createWebHashHistory } from 'vue-router'

// 引入的通用路由

import commRoute from './routeModules/commRoute'

// 月影WEB-后台管理页面

import {adminRoute} from './routeModules/adminRoute';

// 月影WEB-前端展示页面

import {webrootRoute} from './routeModules/webrootRoute';

// 整合所有的模块路由

let moduleRoute = []

.concat(adminRoute)

.concat(webrootRoute);

// 3. 创建路由实例并传递 `routes` 配置。

const router = createRouter({

// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

history: createWebHashHistory(),

// 将通用路由和模块路由合并

routes:[...commRoute,...moduleRoute],

})

export default router

以上代码中引入的通用路由commRoute.js：

// 定义一些通用的路由：每个路由都需要映射到一个组件。

const commRoute = [

// 后续这里可以添加登录页、首页、404页面等的路由

]

export default commRoute

以上代码引入的月影WEB-后台管理页面adminRouter.js：

// 月影WEB-后台管理页面

export const adminRoute = [

{

path: "/admin",

name: "admin",

component: ()=>import("@/views/admin/index.vue"),

children: [

// 列表页面

{

path:"lists", // 注意，子路由的开头位置，不要加 / 路径符

name:"adminLists",

component: ()=>import("@/views/admin/lists/lists.vue"),

},

// 详情页面

{

path:"details",

name:"adminDetails",

component: ()=>import("@/views/admin/details/details.vue"),

}

]

}

]

注意：代码中的“@”表示根目录路径，这个在项目的配置文件webpack.dev.config.js中设置：

const path = require('path');

resolve: {

alias: {

"vue$": "vue/dist/vue.esm-bundler.js",

"@":path.resolve('src')

}

}

而页面中“name”的命名也不能重复。

而./src/router/routeModules/webrootRouter.js和adminRouter.js中的代码类似。

【./src/index.js】：

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

// 创建一个vue应用，将App组件和封装好的路由放入到vue应用，并挂载到模板页面id为app的元素上。

createApp(App).use(router).mount('#app')

./src/App.vue：

<template>

<router-view></router-view>

</template>

<script>

export default {

name:"月影WEB-主页面",

}

</script>