页面跳转导航中间件——Router

上一篇介绍的SCC中,主要用来做组件化管理功能。在业务开发中,我们经常涉及到外链或内联打开App某个业务页面的情况,因此一个页面跳转导航中间件就显得有必要。SCC如果是整个组件化过程的基石的话,那么Router就是业务展开的基础,它统一管理了页面之间的跳转,无需确定具体Activity的名称。

开发中,可以使用URL的形式进行页面跳转,如通过扫描二维码就希望能够打开APP的某个页面,如通过点击短链就能打开Native的Activity页面或者Hybrid页面。如此种种,我们通过一个管理页面跳转中间件来做到统一管理。首先,需要有个链接处理器,用来处理如短链这种,需要先做网络请求返回实际的网络。接着经过URL请求过滤器,如需要打开的URL进行日志上报、Scheme填充等处理、接着经过目标过滤进行如深度链接处理,如我们在AndroidMenifest埋入的scheme一般设置一组,那么如果有多个不同URL请求打开同一个activity,那么在目标过滤器做下处理即可。经过目标过滤器之后就可以打开结果页,结果页分有对应的Activity和错误页。

18582563-ca2eb9e7f69bfb57.png

从上图原理知道,我们可以定义一个IProcessor接口,一个IInterceptor接口,IReqInterceptor和ITargetInterceptor集成IInterceptor,一个NavManager管理类。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端开发中,可以使用路由(router)来实现页面之间的转。常见的前端路由库包括React Router(用于React应用)、Vue Router(用于Vue应用)和Angular Router(用于Angular应用)等。 使用路由进行页面跳转的一般步骤如下: 1. 安装和导入路由库:在项目中安装并导入相应的路由库,具体方法会根据你选择的框架而有所不同。 2. 配置路由:根据你的需求,配置路由信息,包括定义路由路径和对应的组件。 3. 创建导航链接:在页面中创建导航链接,以便用户点击时触发页面跳转导航链接可以是普通的`<a>`标签或者特定的路由链接组件,具体取决于你选择的路由库。 4. 处理页面跳转:当用户点击导航链接时,路由库会根据配置的路由信息匹配对应的组件,并显示在页面中。 下面以React Router为例,简单演示如何进行页面跳转: 1. 安装React Router: ```bash npm install react-router-dom ``` 2. 导入相关组件: ```javascript import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; ``` 3. 配置路由和创建导航链接: ```javascript function App() { return ( <Router> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Router> ); } ``` 4. 创建对应的组件: ```javascript function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } ``` 在上述代码中,`<Link>`组件用于创建导航链接,`<Route>`组件用于配置路由信息,并根据路径匹配对应的组件进行渲染。 这只是一个简单的示例,实际使用中还可以根据需要进行更复杂的配置和定制。具体的使用方法和配置可以参考所选用的路由库的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值