vue路由的介绍和技巧系列

1、获取文件内的vue文件

1、创建一个js文件，webpack版本最新可能不支持了

	const requireComponent = require.context('.',true,/.vue$/)
	const pages = []
	requireComponent.keys().forEach(fileName => {
	    const componentConfig = requireComponent(fileName)
	    const componentName = componentConfig.default.name
	    pages[componentName] = componentConfig.default
	})
	
	export default pages

2、创建一个js文件，汇总各api

	const API = {};
	// 动态导入各个接口文件
	const context = require.context('./path/to/your/api/files', false, /\.js$/);
	context.keys().forEach((key) => {
	  const apiModule = context(key);
	  const apiName = key.replace(/\.\/|\.js/g, '');
	  API[apiName] = apiModule.default;
});

export default API;



3、在router.js文件导入引用

import Pages from '@/pages/index.js'
export default new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes:[
        {
            path: '/',
            name: 'home',
            component: Pages.index
        }]
})

2、解决重复点击导航路由报错

//在router.js文件里
import Router from "vue-router";
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err);
}

Vue.use(Router)

3、vue-page-stack Vue 单页应用导航管理器(插件)

npm地址：https://www.npmjs.com/package/vue-page-stack
git地址：https://github.com/hezhongfeng/vue-page-stack
可参考博客：https://blog.csdn.net/hezf_hero/article/details/105631522
不可随意使用，使用时，刷新页面调用方式需使用activated生命周期。
push会生成渲染新的页面，具体使用时存在不方便刷新页面，清除缓存等问题。所以之前在用户端有过使用，但放弃了。（如果后续实在有特殊需要时可考虑）。
功能： 

在 vue-router 上扩展，原有导航逻辑不变
push 或者 forward 的时候重新渲染页面，Stack 中会添加新渲染的页面
back 或者 go(负数) 的时候先前的页面不会重新渲染，而是从 Stack 中读取，并且这些页面保留着先前的内容状态，例如表单内容，滚动条滑动的位置等
back 或者 go(负数) 的时候会把不用的页面从 Stack 中移除
replace 会更新 Stack 中当前页面
回退到之前页面的时候有 activated 钩子函数触发
支持浏览器的后退，前进事件
支持响应路由参数的变化，例如从 /user/foo 导航到 /user/bar，组件实例会被复用
提供路由方向的变化，并且可以在前进和后退的时候添加不同的动画

<template>
    <div id="app">
        <vue-page-stack>
            <router-view/>
        </vue-page-stack>
    </div>
</template>