demo-router.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import Conf from '../config.json';
  4. import vueg from 'vueg';
  5. import 'vueg/css/transition-min.css';
  6. const Index = () => import('./demo/index.vue');
  7. const DemoNav = () => import('./demo/demonav.vue');
  8. Vue.use(VueRouter);
  9. const routes = [
  10. {
  11. path: '*',
  12. redirect: '/index'
  13. },
  14. {
  15. path: '/index',
  16. components:{
  17. main:Index,
  18. demonav:DemoNav,
  19. }
  20. },
  21. ];
  22. //组件示例页面
  23. Conf.packages.map(item => {
  24. if (item.showDemo === false) return;
  25. const pkgName = item.name.toLowerCase()
  26. routes.push({
  27. path: '/' + item.name,
  28. components: {
  29. main: () => import('./demo/' + pkgName + '.vue'),
  30. demonav: DemoNav
  31. },
  32. name:item.name
  33. });
  34. });
  35. const router = new VueRouter({
  36. routes,
  37. scrollBehavior(to, from, savedPosition) {
  38. if(to.path == '/index'){
  39. return null;
  40. }else{
  41. return { x: 0, y: 0 }
  42. }
  43. }
  44. });
  45. const options = {
  46. duration: '0.3', //转场动画时长,默认为0.3,单位秒
  47. firstEntryDisable: false, //值为true时禁用首次进入应用时的渐现动画,默认为false
  48. firstEntryDuration: '.4', //首次进入应用时的渐现动画时长,默认为.6
  49. forwardAnim: 'fadeInRight', //前进动画,默认为fadeInRight
  50. backAnim: 'fadeInLeft', //后退动画,默认为fedeInLeft
  51. sameDepthDisable: false, //url深度相同时禁用动画,默认为false
  52. tabs: [], //默认为[],'name'对应路由的name,以实现类似app中点击tab页面水平转场效果,如tabs[1]到tabs[0] ,会使用backAnim动画,tabs[1]到tabs[2],会使用forwardAnim动画
  53. tabsDisable: false, //值为true时,tabs间的转场没有动画,默认为false
  54. shadow: false, //值为false,转场时没有阴影的层次效果
  55. disable: false, //禁用转场动画,默认为false,嵌套路由默认为true
  56. nuxt: false //若使用后端渲染框架Nuxt,需要将此设为true,默认为false
  57. };
  58. Vue.use(vueg, router, options);
  59. export default router;