Vue学习（6）Ant-design-vue-pro⼿把⼿搭建（1）
⼀.可扩展性路由创建
ant-design-pro包括如下模块:
- Dashboard
- 分析页
- 监控页
- ⼯作台
- 表单页
- 基础表单页
- 分步表单页
- ⾼级表单页
-
列表页
- 查询表格
- 标准列表
- 卡⽚列表
- 搜索列表（项⽬/应⽤/⽂章）
- 详情页
- 基础详情页
- ⾼级详情页
- 结果
- 成功页
- 失败页
-
异常
- 403 ⽆权限
- 404 不到
- 500 服务器出错
- 个⼈页
- 个⼈中⼼
- 个⼈设置
- 图形编辑器
- 流程图编辑器
- 脑图编辑器
- 拓扑编辑器
-
帐户
- 登录
- 注册
- 注册成功
每个模块在项⽬中都在Views下有⼀个⽂件夹与之相应，我们就实现其中五个模块，如下所⽰
相应地，也对应⼀段路由，如dashboard模块就对应于/dashboard，⽤户模块就对应于/user，同时为了逻辑清晰，每个模块下的各个页在路由上都作为模块的孩⼦路由，如⽤户模块的路由写法如下:
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/UserLayout"),
children: [
{
path: "/user",
redirect: "/user/login"
},
{
path: "/user/login",
name: "login",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Register")
},
{
path: "/user/register-result",
name: "sult",
component: () =>
import(
/* webpackChunkName: "user" */ "../views/User/RegisterResult"
)
}
]
⽤户模块路由是/user，我们采⽤⽤户布局（后⾯实现），其下⾯的页l路由都作为⽤户模块的孩⼦，如登录就是/user/login，对应User⽂件夹下的Login组件，这样的好处是⾮常清晰，⽽且如果你想在⽤户模块下增加新的页⾯，路由扩展起来就⾮常⽅便，只需将新页⾯的路由放到children⾥即可。
这⾥还写了⼀个重定向，即如果你输⼊/user就会重定向到/user/login中。
其他的路由写法也类似，代码如下：
import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
base: v.BASE_URL,
routes: [
{
path: "/",
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/BasicLayout"),
children: [
// dashboard
{
path: "/",
redirect: "/dashboard/analysis"
},
{
path: "/dashboard",
name: "dashboard",
path: "/dashboard/analysis",
name: "analysis",
component: () =>
import(vuejs流程图插件
/* webpackChunkName: "dashboard" */ "../views/Dashboard/Analysis"                )
}
]
},
// form
{
path: "/form",
name: "form",
component: { render: h => h("router-view") },
children: [
{
path: "/form/basic-form",
name: "basicForm",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/BasicForm"
)
},
{
path: "/form/step-form",
name: "stepForm",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm"
),
children: [
{
path: "/form/step-form",
redirect: "/form/step-form/info"
},
{
path: "/form/step-form/info",
name: "info",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step1"                    )
},
{
path: "/form/step-form/confirm",
name: "confirm",
component: () =>
import(
/
* webpackChunkName: "form" */ "../views/Forms/StepForm/Step2"                    )
},
{
path: "/form/step-form/result",
name: "result",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step3"                    )
}
]
}
]
path: "/exception",
name: "exception",
component: { render: h => h("router-view") },
redirect: "/exception/403",
children: [
{
path: "/exception/403",
name: "exception403",
component: () =>
import(
/* webpackChunkName: "exception" */ "../views/Exception/403"
),
},
{
path: "/exception/404",
name: "exception404",
component: () =>
import(
/* webpackChunkName: "exception" */ "../views/Exception/404"
),
},
{
path: "/exception/500",
name: "exception500",
component: () =>
import(
/* webpackChunkName: "exception" */ "../views/Exception/500"
),
}
]
},
// Profile
{
path: "/profile",
name: "profile",
component: { render: h => h("router-view") },
redirect: "/profile/basic",
children: [
{
path: "/profile/basic",
name: "basic",
component: () =>
import(
/* webpackChunkName: "profile" */ "../views/Profile/BasicProfile"
)
,
},
{
path: "/profile/advanced",
name: "advanced",
component: () =>
import(
/* webpackChunkName: "profile" */ "../views/Profile/AdvancedProfile"                ),
meta: { title: "⾼级详情页" }
}
]
},
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/UserLayout"),
children: [
path: "/user",
redirect: "/user/login"
},
{
path: "/user/login",
name: "login",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Register")
},
{
path: "/user/register-result",
name: "sult",
component: () =>
import(
/* webpackChunkName: "user" */ "../views/User/RegisterResult"
)
}
]
}
]
},
{
path: "/403",
name: "403",
component: () =>
import(/* webpackChunkName: "exception" */ "../views/Exception/403")
},
{
path: "*",
name: "404",
component: () =>
import(/* webpackChunkName: "exception" */ "../views/Exception/404")
}
]
});
export default router;
这⾥我们看到了下⾯这串代码，这实际上就是调⽤了render函数来渲染，如同直接使⽤包含<router-view></router-view>的组件{ render: h => h("router-view") }
我们除了正常的模块，还包括了404，就是访问地址不存在时就会跳转到404。
好，我们路由写好后就按照路由的配置相应去创建各个⽂件，views⽂件夹下的截图如下所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。