vue2 router--- index.js

完整的代码, 可以复制引用

vue2的router路由配置

// 引入所需的库和模块
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';  // 引入Vuex的store
import Api from '../lib/api/api';  // 引入API模块

// 引入所需的组件
import Homes from '../views/homes/homes';
import Index from '../views/homes/index';

// 告诉Vue使用VueRouter插件
Vue.use(Router);

// 创建新的VueRouter实例
let router = new Router({
  // 使用history模式可以去掉URL中的"#"
  // mode: 'history',
  // 定义路由映射
  routes: [
    { path: '/', redirect: '/login'},  // 默认路由重定向到登录页
    {
      path: '/home',  // 主页路由
      name: 'home',
      component: Homes,  // 对应的组件
      children: [  // 子路由定义
        { path: '/', name: 'home', component: Index2},
        { path: '/index', name: 'index', component: Index},
      ]
    },
    { path: '/bet/:sign', name: 'bet', component: Bet},  // 带参数的路由
    { path: '*', redirect: '/home'}  // 未定义的路由全部重定向到主页
  ]
});

// 路由钩子，用于在路由改变前进行一些操作
router.beforeEach((to, from, next) =>  {

  // 当路由改变时，滚动到页面顶部
  if(document.documentElement['scrollTop']) {
    document.documentElement.scrollTop = 0;
  } else {
    document.body.scrollTop = 0;
  }

  // 在路由改变前，取消上一个路由的所有API请求
  if(store.state['axiosPromiseCancel'].length > 0) {
    store.state['axiosPromiseCancel'].forEach(e => {
      e && e.f()
    });
  }
  store.state['axiosPromiseCancel'] = [];

  // 如果baseConfig的banner没有数据，请求API以获取它
  if(!store.state.baseConfig.banner) {
    Api.baseConfig().then(response => {
      if (response.success) {
        store.state.baseConfig = response.data;
      }
    })
  }
  // 用于检查是否需要加密数据
  // Api.isCryptData().then(response => {
  //   if (response['success']) {
  //     window.isCryptData = response['data'];
  //   }
  // });

  next();  // 继续到下一个钩子或者路由
});

// 导出router模块
export default router;