Router

Vue Router 是 Vue.js 官网的路由管理器。它和 Vue.js 的外围深度集成，让构建单页面利用变得大海捞针。学习Vue，Vue Router是必须要把握的技能之一。官网教程是最好的的浏览文献，请仔细阅读 利用场景首先，咱们聊一个vue-router的典型利用场景 产品经理: 某天，产品经验拿着掘金APP说，这是APP很漂亮，咱们也要做一个Web APP，款式呢，照抄掘金APP的款式就行。 要求: 底部导航栏: 底部一排固定不动的按钮顶部导航栏: 顶部**也有一排固定不动的按钮顶部也有一个带有返回按钮的导航栏固定不动，点击底部导航栏之后，两头局部的页面应该跳转到对应性能页面，点击顶部的返回按钮之后，应该返回到之前的页面。加载页面时尽可能的缩小刷新，甚至是不刷新。优化用户体验加载速度肯定要疾速，且尽可能的缩小流量的耗费URL要好看丑陋，并且URL能够动静承受参数。如：http://music.163.com/#/my/m/m...需要剖析菜鸟: 菜鸟拿到需要，前三个需要比较简单，应用css的display属性进行切换就能够搞定。第四个和第五个需要怎么搞呢？加载页面的时候，必定要做页面申请的，页面资源也是很大的流量的。至于第6个性能嘛，好难搞呀。抓耳挠腮中...... 老鸟: 菜鸟呀，看你这苦思冥想的，遇到什么难题了？ 菜鸟: 天杀的产品经理，让我做我的项目，还提了一堆附加要求，我都想拿大刀砍死他了。与产品经理唇齿相依 老鸟: 哎呀，别着急呀。一看你就是陷入传统开发的思维定势了。都2020年了，还不晓得单页面开发，你太out喽？ 菜鸟：何为单页面开发呀，给我讲讲呗？这么神奇的吗？能解决我的难题？ 老鸟：内事不决为百度，当初学习也为时不晚。哈哈。 菜鸟：努力学习中...... 何为单页面只有一个WEB主页面的利用，公共资源(js、css等)仅需加载一次，所有的内容都蕴含在主页面，对每一个功能模块组件化。单页利用跳转，就是切换相干组件，仅刷新部分资源。罕用于PC端官网、购物等网站。 何为多页面每一次页面跳转的时候，后盾服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页利用。传统页面的写法大多为多页面 Vue-Router装置npmnpm install vue-router// main.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)根本路由配置export const constantRouterMap = [ ..., { path: '/', component: Layout, // 重定向 redirect: '/dashboard', // 嵌套多级路由 children: [ { path: 'dashboard', component: () => import('@/views/Dashboard'), name: 'Dashboard', // 路由元信息 meta: { ... } } ] }, ...]路由拆分 ...

路由是干嘛的？ 路由三要素Routers，Route Matchers，Navigation（or Route Changes） Routers  <BrowserRouter> &<HashRouter>    区别：保留URL的形式和与web服务器通信的形式 Route MatchersSwitch & Route <Switch>渲染时，它会搜寻通过其孩子<Route>元素找到一个匹配以后URL的门路。当它找到一个匹配的,它会渲染这个<Route>并疏忽其余的<Route>。<Route path="/">通常放在最初面。 这里不得不提一下React Router路由配置和路由的匹配原理。路由匹配原理蕴含三个方面：嵌套关系，门路语法，优先级 嵌套关系：嵌套路由被形容成一种树形构造。React Router 会深度优先遍历整个路由配置来寻找一个与给定的 URL 相匹配的路由。 门路语法：路由门路是匹配一个（或一部分）URL 的 一个字符串模式。大部分的路由门路都能够间接依照字面量了解，除了以下几个非凡的符号： :paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的局部将被作为一个参数() – 在它外部的内容被认为是可选的* – 匹配任意字符（非贪心的）直到命中下一个字符或者整个 URL 的开端，并创立一个 splat 参数<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael 和 /hello/ryan<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg 优先级：路由算法会依据定义的程序自顶向下匹配路由。因而，当你领有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的门路。例如，千万不要这么做： <Route path="/comments" ... /><Redirect from="/comments" ... />Navigation（or Route Changes）link & Redirect <Link to="/">Home</Link> // 或者能够用这个代替 <a href="/">Home</a><Redirect to="/login" /> 没有Switch包裹的状况下：http://localhost:3000/about会匹配两个组件Home和About，原理：他会对每个path都进行匹配 <Route path ="/"> <Home/> </Route> //改为 <Route exact path ="/"> <Home/> </Route>有Switch包裹的状况下，会依照先后顺序进行匹配，匹配实现后不会再匹配其余路由，这时候能够将这句返回Switch的孩子Route组件的最初一个，而且这个"/"能够匹配除了后面路由的任何一个 <Route path ="/"> <Home/> </Route>这个时候发现有一个问题，就是app中的跳转列表是不会隐没的，个别状况下咱们可能须要间接跳转到一个新页面 ...

官网链接：https://sapui5.hana.ondemand.... 一个例子： "routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "viewPath": "kyma.sample.app.view", "controlId": "app", "controlAggregation": "pages", "async": true }, "routes": [ { "pattern": "", "name": "orders", "target": ["orders"] } ], "targets": { "orders": { "viewName": "Orders", "viewId": "orders", "viewLevel": 1, "title": "{i18n>title}" } } 在 manifest.json 文件的 sap.ui5 区域，增加了三个子区域： (1) config(2) routes(3) target configThis section contains the global router configuration and default values that apply for all routes and targets.蕴含了全局路由器信息和适应于所有路由门路和指标的默认值。 ...