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、解决重复点击导航路由报错
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>