router.js 2.7 KB

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