router.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import { packages } from '../../src/config.json';
  4. import vueg from 'vueg';
  5. import 'vueg/css/transition-min.css';
  6. import frontCover from './index.vue';
  7. const Index = () => import('./info.vue');
  8. const Intro = () => import('./page/intro.vue');
  9. const Start = () => import('./page/start.vue');
  10. const International = () => import('./page/international.vue');
  11. const Theme = () => import('./page/theme.vue');
  12. //const Update = () => import('./page/changelog.vue');
  13. Vue.use(VueRouter);
  14. const routes = [
  15. {
  16. path: '*',
  17. redirect: '/index'
  18. },
  19. {
  20. path: '/',
  21. redirect: '/index'
  22. },
  23. {
  24. path:'/index',
  25. name:'frontcover',
  26. component:frontCover
  27. },
  28. {
  29. path: '/doc',
  30. name:'intr',
  31. components: {
  32. demonav: Index,
  33. main: Intro,
  34. }
  35. },
  36. {
  37. path: '/international',
  38. name:'international',
  39. components: {
  40. demonav: Index,
  41. main: International,
  42. }
  43. },
  44. {
  45. path: '/start',
  46. name:'start',
  47. components: {
  48. demonav: Index,
  49. main: Start,
  50. }
  51. },
  52. {
  53. path: '/theme',
  54. name:'theme',
  55. components: {
  56. demonav: Index,
  57. main: Theme,
  58. }
  59. }
  60. ];
  61. //组件md文件展示
  62. packages.map(item => {
  63. if (item.showDemo === false) return;
  64. const pkgName = item.name.toLowerCase();
  65. routes.push({
  66. path: '/' + item.name,
  67. components: {
  68. demonav: Index,
  69. main: () => import('./view/' + pkgName + '.vue')
  70. },
  71. name: item.name
  72. });
  73. });
  74. const router = new VueRouter({
  75. routes,
  76. scrollBehavior(to, from, savedPosition) {
  77. if (to.path == '/index') {
  78. return null;
  79. } else {
  80. return { x: 0, y: 0 }
  81. }
  82. }
  83. });
  84. const options = {
  85. duration: '0.3', //转场动画时长,默认为0.3,单位秒
  86. firstEntryDisable: false, //值为true时禁用首次进入应用时的渐现动画,默认为false
  87. firstEntryDuration: '.4', //首次进入应用时的渐现动画时长,默认为.6
  88. forwardAnim: 'fadeInRight', //前进动画,默认为fadeInRight
  89. backAnim: 'fadeInLeft', //后退动画,默认为fedeInLeft
  90. sameDepthDisable: false, //url深度相同时禁用动画,默认为false
  91. tabs: [], //默认为[],'name'对应路由的name,以实现类似app中点击tab页面水平转场效果,如tabs[1]到tabs[0] ,会使用backAnim动画,tabs[1]到tabs[2],会使用forwardAnim动画
  92. tabsDisable: false, //值为true时,tabs间的转场没有动画,默认为false
  93. shadow: false, //值为false,转场时没有阴影的层次效果
  94. disable: false, //禁用转场动画,默认为false,嵌套路由默认为true
  95. nuxt: false //若使用后端渲染框架Nuxt,需要将此设为true,默认为false
  96. };
  97. Vue.use(vueg, router, options);
  98. export default router;