vue中Router的封装以及使用

在项目中会有多个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;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

在HomeRouter.js 中

import HomeConfig from "./HomeConfig"; //引入刚刚抛出的模块

const HomeRouter = [
    HomeConfig.home, //直接调用
    HomeConfig.about,
];
//模块暴露
export default HomeRouter;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

在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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

在main.js 中配置全局

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

  

 

  
1
  
2
  
3
 

调用时：

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

  

 

  
1
  
2
  
3
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/107005339