美文网首页
前端路由规范

前端路由规范

作者: 小枫学幽默 | 来源:发表于2019-12-13 11:42 被阅读0次

一 、 前端路由名和路径名命名规范

为避免路由重名和加强路由语义化,特制定此规范。

通常我们的项目中src目录中会有modules文件夹来拆分应用模块,如下结构

├── doctor
│   ├── pages
│   │   ├── doctor_details.vue
│   │   ├── doctor_invite.vue
│   │   └── index.vue
│   └── router
│       └── index.js

模块中会有

pages 页面组件目录

router 路由目录

router 中每个路由pathname需遵循以下规则

  • 1 path组成为 /模块名/页面名
    示例:

    {
        path: "/doctor/invite",
        component: doctorInvite,
    }
    
  • 2 name组成为 模块名[页面名]
    示例:

    {
        path: "/doctor/invite",
        name: "doctorInvite",
        component: doctorInvite,
    }
    

注意: 页面名首字母大写

二 、 前端路由跳转时使用规范

使用 router-link组件跳转路由时,需严格使用以下格式:

<router-link :to="{name:'articleAddDoctor',query:{type:0}}">

不可用 以下格式

:to="{path:'/path/to/page'}"
:to="/path/to/page"

注: 若确实有特殊情况,则允许。

相关文章

  • 前端路由规范

    一 、 前端路由名和路径名命名规范 为避免路由重名和加强路由语义化,特制定此规范。 通常我们的项目中src目录中会...

  • 第三十一节:Vue路由:前端路由vs后端路由的了解

    1. 认识前端路由和后端路由 前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解 路由:...

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • 前端微服务化解决方案5 - 路由分发

    路由分发式微前端 从应用分发路由到路由分发应用 用这句话来解释,微前端的路由,再合适不过来. 路由分发式微前端,即...

  • vue - 路由模式

    1 路由的基本概念与原理 路由的本质就是对应关系; 在开发中, 路由分为前端路由和后端路由. 1.1 前端路由 概...

  • 我的前端规范——CSS篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——HTML篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——JavaScript篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • 我的前端规范——开篇

    相关文章 博客原文我的前端规范——开篇我的前端规范——HTML篇我的前端规范——CSS篇我的前端规范——JavaS...

  • vue与APP互链

    路由规范:

网友评论

      本文标题:前端路由规范

      本文链接:https://www.haomeiwen.com/subject/iflfnctx.html