在項目中會有多個vue頁面，就會引入許多路由，如果配置的路由都放在router文件夾下的index.js中，要寫很多個,而且顯得代碼量太多。
所以我們需要 單獨寫出來 。

在router文件夾中新建HomeRouter.js 和HomeConfig.js

在HomeConfig.js中

const HomeConfig = {home: { //home路由path: '/',name: 'home',component: () => import( '../views/Home.vue')},about: { //about路由path: '/HomeSon',name: 'HomeSon',component: () => import( '../views/HomeSon.vue')} }; //拋出模塊 export default HomeConfig;

在HomeRouter.js 中

import HomeConfig from "./HomeConfig"; //引入剛剛拋出的模塊const HomeRouter = [HomeConfig.home, //直接調用HomeConfig.about, ]; //模塊暴露 export default HomeRouter;

在index.js中

import Vue from 'vue' import VueRouter from 'vue-router'； //引入 import HomeRouter from "./HomeRouter";Vue.use(VueRouter); //使用 const routes = [...HomeRouter ];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes });export default router

在main.js 中配置全局

import HomeConfig from "./router/HomeConfig"; //配置全局 Vue.prototype.$HomeConfig=HomeConfig;

調用時：

change() {this.$router.push(this.$HomeConfig.about.path)}

總結

以上是生活随笔為你收集整理的vue中Router的封装以及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。