(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{552:function(t,s,a){"use strict";a.r(s);var n=a(46),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"路由"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#路由"}},[t._v("#")]),t._v(" 路由")]),t._v(" "),a("p",[t._v("像"),a("code",[t._v("Vue")]),t._v("、"),a("code",[t._v("React")]),t._v("这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes框架的路由基于"),a("a",{attrs:{href:"https://router.vuejs.org/zh-cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue-router"),a("OutboundLink")],1),t._v("，感兴趣的同学可以看看。")]),t._v(" "),a("h2",{attrs:{id:"路由规范"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#路由规范"}},[t._v("#")]),t._v(" 路由规范")]),t._v(" "),a("p",[a("code",[t._v("Vue-router")]),t._v("加载的路由是使用 "),a("code",[t._v("router.config.js")]),t._v(" 配置的。而"),a("code",[t._v("Fes.js")]),t._v("将根据项目的 "),a("code",[t._v("pages")]),t._v("目录结构自动生成路由规则")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("\tpages\n\t├── index.vue         # 根路由页面 路径 index.html#/\n    ├── *.vue             # 模糊匹配 路径 *\n    ├── a.vue             # 路径 /a\n    ├── b                 # 文件夹b\n    │   ├── index.vue     # 路径 /b\n    │   ├── @id.vue       # 动态路由 /b/:id\n    │   └── c.vue         # 路径 /b/c\n    └── layout.vue        # 根路由下所有page共用的外层\n")])])]),a("ol",[a("li",[t._v("如果目录下有"),a("code",[t._v("layout.vue")]),t._v("，则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。")]),t._v(" "),a("li",[t._v("带参数的路径使用"),a("code",[t._v("@[filename].vue")]),t._v("的方式，例如@id.vue")]),t._v(" "),a("li",[t._v("支持模糊匹配，例如"),a("code",[t._v("pages/*.vue")]),t._v("对应的路径是"),a("code",[t._v("*")]),t._v("，可以通过此路由实现404效果")]),t._v(" "),a("li",[t._v("pages下的components文件夹下的.vue不被解析成路由，可以存放跟业务相关的公共组件。")])]),t._v(" "),a("h2",{attrs:{id:"智能路由匹配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#智能路由匹配"}},[t._v("#")]),t._v(" 智能路由匹配")]),t._v(" "),a("p",[t._v("根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分，选择分数最高的路由：")]),t._v(" "),a("ul",[a("li",[t._v("路由的路径每个子项得到4分")]),t._v(" "),a("li",[t._v("子项为静态细分(/list)再加3分")]),t._v(" "),a("li",[t._v("子项为动态细分（/:orderId）再加2分")]),t._v(" "),a("li",[t._v("根段加1分")]),t._v(" "),a("li",[t._v("通配符匹配到的减去1分")])]),t._v(" "),a("p",[t._v("通过智能路由匹配可以解决类似"),a("code",[t._v("/list/create")]),t._v("和"),a("code",[t._v("/list/:id")]),t._v("到底匹配什么路由的问题。")]),t._v(" "),a("h2",{attrs:{id:"跳转路由"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跳转路由"}},[t._v("#")]),t._v(" 跳转路由")]),t._v(" "),a("p",[t._v("API参考"),a("a",{attrs:{href:"https://router.vuejs.org/zh-cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue-router"),a("OutboundLink")],1),t._v("。"),a("a",{attrs:{href:"https://router.vuejs.org/zh-cn/api/router-instance.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("路由实例"),a("OutboundLink")],1),t._v("路由实例会挂载在FesApp对象上。")]),t._v(" "),a("p",[t._v("例如跳转可以：")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onComplete"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onAbort"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("replace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onComplete"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onAbort"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("go")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("back")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("切换前切换后事件钩子：")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setBeforeRouter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" to"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FesApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAfterRouter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("route")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"您浏览到了"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("route"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);