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;

在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的封装以及使用相关推荐

axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
vue中$router.push打开新窗口
vue中$router.push打开一个新窗口 this.$router.push("/CustomView/systemManage/CustomView"); //跳转// 默 ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue中axios的封装以及使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.axios 在src下新建 network 文件夹 network文件夹: 网络模块放网络请求 ind ...
vue中$router以及$route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [{ path: '/home ...
高德地图中加载three.js（vue中）（封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图官方文档给出来的引用方法 <template><div ...
vue中的axios封装
import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axio ...
vue中实现及封装html合同文本在线编辑保存的功能
在vue项目开发中,遇到一个对纯html合同文本进行在线编辑保存的需求,自己用JQuery和iframe摸索着封装了一个组件,遇到相同需求的前端友人可以参考一下,后续还要完善.(贴出完整代码) /封装 ...
在vue中使用superagent封装http请求
// 配置API接口地址// 引用superagent import request from 'superagent' // import jsonp from 'superagent-jsonp' ...

vue中Router的封装以及使用

vue中Router的封装以及使用相关推荐

最新文章

热门文章