# vue-router-module

**Repository Path**: hainee/vue-router-module

## Basic Information

- **Project Name**: vue-router-module
- **Description**: 一个简单实用的VueRouter扩展组件，可以有效解决编写Vue路由的痛点
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-router-module

#### 组件介绍
	一个简单实用的VueRouter扩展组件，可以有效解决编写Vue路由的痛点

#### 组件依赖
	该组件弱依赖于vue-router-extention，当你需要使用路由的扩展方法时，才需要引用vue-router-extention组件
	vue-router-extention的扩展方法：
		1. showChild
		2. return
		3. returnTo
		4. backTo
		5. callback
		
	为了能更好的使用vue-router-module组件，建议引用vue-router-extention

#### 如何安装组件
	npm i vue-router-module

#### 如何定义模块
	// 在您的路由定义js文件中编写如下代码
	
	import RouterModule from 'vue-router-module'
	import VueRouter from 'vue-router' //不一定有该定义
	
	Vue.use(VueRouter)
	
	// 定义一个用户登录模块
	const UserLoginModule = RouterModule.def({
		name: 'userLogin',
		path: 'login',
		component: () => import('_c/user/login')
	})
	
	//定义一个用户消息详情模块
	const UserMessageDetailModule = RouterModule.def({
		name: 'messageDetail',
		path: 'detail',
		component: () => import('_c/user/message')
	})
	
	// 定义一个用户消息列表模块
	const UserMessageModule = RouterModule.def({
		name: 'userMessage',
		path: 'user-message',
		component: () => import('_c/user/message'),
		children: [UserMessageDetailModule]
	})
	
	// 包含一个模块
	const HomeModule = RouterModule.def({
		name: 'home',
		path: '/',
		component: () => import('_c/home'),
		children: [UserLoginModule, UserMessageModule]
	})
	
	//定义路由树
	export default new VueRouter({
		routes: [
			HomeModule('')
		]
	})
	
#### 如何使用路由
	比如：
		在home路由下，显示用户消息模块路由：
		this.$router.showChild({
			name: 'userMessage'
		})
		
		在userMessage列表路由下，显示用户消息详情的路由：
		this.$router.showChild({
			name: 'messageDetail',
			params: {
				detailId: 100
			}
		}, res => {
			// 定义路由返回时的回调
		})
		
		在messageDetail路由下，返回上一级路由
		this.$router.return({
			msg: 'OK'
		})
		
		在messageDetail路由下，返回到指定名称的父级路由并调用home路由的回调函数
		await  this.$router.returnTo({
			name: 'home',
			params: {
				msg: 'OK'
			}
		})
		
		在messageDetail路由下，直接返回到指定名称的父级路由
		await this.$router.backTo('home')
		
		如果直接调用this.$router.back or this.$router.go是不会触发回调函数的
		
		在messageDetail路由下，调用上一级路由的回调函数
		this.$router.callback({
			msg: 'OK'
		})