【VUE】vue-router使用

vue-router：即vue路由管理组件，用于管理vue各页面之间的访问及控制。

router.js及main.js为vue默认的路由管理文件

在iview及其他vue框架中，也有将router.js单独提出于router文件夹加以统一管理的方式

vue-router示例：

/**
* router.js
**/
export const webRouter = [{
		path: '/',
		meta: {
			title: 'require'
		},
		alias: '/index',
		component: (resolve) => require(['./views/web/index.vue'], resolve)
	},
	{
		path: '/index2',
		meta: {
			title: 'import'
		},
		component: () => import ('@//views/web/index2.vue') 
	}
];


export const routers = [
	...webRouter
];

• 使用export将const关键字声明的路由相关配置导出
• path：页面访问路径
• meta：一般用于存储页面标题或页面副标题导航
• alias：页面访问路径别名（作用等同于path，常用于页面首页）
• component：vue组件声明，用于配置页面的加载方式及页面根路径
• require：懒加载（一般用于解决首屏打开时间过长的问题）
• import ：全量加载
• …：…可以理解为list对象，用于表示导出的路由为一个list列表（多个）

import VueRouter from 'vue-router';
import {
	routers,
	webRouter
} from './router';
Vue.use(VueRouter);
// 路由配置
const RouterConfig = {
	mode: 'history',
	base: '/',
	routes: routers
};
const router = new VueRouter(RouterConfig);
new Vue({
	el: '#app',
	router: router,
	render: h => h(App)
});

• mode：vue-router有两种加载方式，hash及history，这里不多做阐述
• base：用于配置项目的访问根路径（用以解决hash或history模式下/#/的路径问题，以及后续使用时路径有误及传参失败的问题）
• 引入router配置时，一定要将router配置中需要使用的关键模块引入！且在引入list时，请使用…XXX