vue-base-demo/src/router/routes.js

vue base demo

export default (router) => {
  // 配置路由
  router.map({
    '/': {
      component: (reslove) => require(['../views/Home/index.vue'], reslove)
    },
    '/foo': {
      component: (reslove) => require(['../views/Foo/index.vue'], reslove),
      // 在/foo下设置一个子路由
      subRoutes: {
        '/one': {
          // 当匹配到/foo/one时，会在Foo's <router-view>内渲染
          // 一个FooOne组件
          component: (reslove) => require(['../views/Foo/FooOne.vue'], reslove)
        },
        '/two': {
          // two也是一样，不同之处是匹配的路由会是/foo/two
          component: (reslove) => require(['../views/Foo/FooTwo.vue'], reslove)
        }
      }
    },
    '/bar': {
      component: (reslove) => require(['../views/Bar/index.vue'], reslove)
    },
    // 动态片段
    '/user/:username': {
      name: 'user', // 给这条路径加上一个名字
      component: (reslove) => require(['../views/User/index.vue'], reslove)
    },
    // 全匹配片段
    '/users/*username': {
      component: (reslove) => require(['../views/User/index.vue'], reslove)
    },
    // 全匹配片段
    '/count': {
      component: (reslove) => require(['../views/Count/index.vue'], reslove)
    },
    // 调用接口
    '/members': {
      component: (reslove) => require(['../views/Members/index.vue'], reslove)
    }
  })
}