前提
react Router 再 v3 版本之前 是有 onEnter 钩子函数的，也支持静态路由配置；，但到了 v4 版本后钩子函数被移除，官方说是为了将此提供给开发者，由开发者自由发挥。既然如此我们就只能自己实现，目前网上有很多版本，大多都是差不多的，这里做一个总结并深化一下。同时提供钩子函数或者vue中叫路由守卫和静态化路由配置。
钩子函数实现
钩子函数实现比较简单，只需要包装一下官方的路由即可实现，这里我们允许钩子支持 Promise 异步，就需要一个异步组件；代码如下
异步组件代码
class AsyncBeforeEnter extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
// 注意：此处component和render不会同时使用，同Route中component和render，render方法优先级要高
// 目标组件 同 <Route componet>
Component: null,
// 目标组件render 方法 同 <Route render>
render: null,
// 错误信息
error: null,
// 标记异步是否完成
completed: false
}
}
componentDidMount() {
const { beforeEnter, ...props } = this.props
// beforeEnter 钩子函数
const enter = beforeEnter({ ...props })
if (isPromise(enter)) {
// 判断是否是Promise
enter
.then(next => {
this.handleAfterEnter(next)
})
.catch(error => {
console.error(error)
this.setState({ error })
})
} else {
this.handleAfterEnter(enter)
}
}
handleAfterEnter(next) {
// 结果处理
const { route = {}, ...props } = this.props
// 如果结果是null 或者undefined 或者 true ： 不做任何处理直接渲染组件
if (next === null || next === undefined || next === true) {
this.completed(route.component, route.render)
return
}
// 返回false：阻止组件的渲染
if (next === false) {
this.completed(null)
return
}
// 返回 string ： 跳转的路由，类似http中302状态码
// 这里使用 React Router 的 Redirect 做跳转
if (typeof next === 'string') {
this.completed(null, () => <Redirect to={next} from={props.location.pathname} />)
return
}
// 返回React 组件
if (typeof next === 'function' || React.isValidElement(next)) {
this.completed(null, () => next)
return
}
// 返回 Object: 如果有 redirect=true 的属性，做跳转
// 否则使用 Route 组件渲染
if (isPlainObject(next)) {
const { redirect, ...nextProps } = next
if (redirect === true) {
this.completed(null, () => <Redirect {...nextProps} {...{ from: props.location.pathname }} />)
return
}
this.completed(() => <Route {...nextProps} />)
return
}
warn(`"${props.location.pathname} => beforeEnter"
hook return values error. expected null? undefined? true? React.Component? htmlElement? Route props?
route props detail to see
https://reacttraining.com/react-router/web/api/Route
https://reacttraining.com/react-router/web/api/Redirect`
)
// 例外情况 阻止组件的渲染
this.completed(null)
}
/**
* 完成后改变state渲染组件：
* @param component
* @param render
*/
completed(component, render) {
this.setState({ Component: component, render, completed: true, error: null })
}
getExtraProps() {
// 去掉钩子函数，获取其他props
const { loading: Loading, beforeEnter, ...props } = this.props
return { ...props }
}
render() {
const { Component, render, error, completed } = this.state
if (!completed) {
// 未完成
return null
}
// 已完成
if (render && typeof render === 'function') {
return render(this.getExtraProps())
}
return Component ? <Component {...this.getExtraProps()} /> : null
}
}
带有钩子函数的 Route
将其命名为 PrivateRoute
export default (route) => (
<Route
path={route.path}
exact={route.exact}
strict={route.strict}
location={route.location}
sensitive={route.sensitive}
children={route.children}
render={props => {
// beforeEnter
const { beforeEnter, ...nextProps } = route
// 如果有钩子函数，执行带有异步组件
if (route.beforeEnter && typeof route.beforeEnter === 'function') {
return (
<AsyncBeforeEnter
beforeEnter={beforeEnter}
route={nextProps}
{...props}
{...extraProps}
/>
)
}
// 直接渲染
return (
route.render && typeof route.render ?
(
route.render({ ...props, ...extraProps, route: nextProps })
) : (
route.component ? (
<route.component
route={nextProps}
{...props}
{...extraProps}
/>
) : null
)
)
}}
/>
)
使用的时候就可以用该 Route 代替官方的
示例：
<PrivateRoute path="/" component={Example} beforeEnter={(props) => check(props) }/>
<PrivateRoute path="/user" component={User} beforeEnter={(props) => check(props) }/>静态化路由配置，并支持钩子函数
静态化路由配置官方页给出了方案，见：react-router-config，本文的静态路由配置也是参考了该实现，并重写了其中的实现，加入钩子函数
静态路由配置
基本的静态路由表如下
// 顶级两个路由
// 一个登录
// 其他需要授权后放回
export default [
{
path: '/example',
key: 'example',
component: Example,
beforeEnter(props) {
if (auth(props.localtion.pathname)) {
return true
}
return '/login'
},
// 子路由
routes: [
{
path: '/example1',
key: 'example1',
component: Example1,
}
]
},
{
path: '/login',
key: 'login',
component: Login
}
]
改写钩子函数使其能渲染静态路由表=>renderRoutes
// renderRoutes
export default (routes, switchProps = {}, extraProps = {}) => {
return routes && routes.length > 0 ? (
<Switch {...switchProps}>
{
routes.map((route, i) => (
<Route
key={route.key || i}
path={route.path}
exact={route.exact}
strict={route.strict}
location={route.location}
sensitive={route.sensitive}
children={route.children}
render={props => {
// beforeEnter
const { beforeEnter, ...nextProps } = route
if (route.beforeEnter && typeof route.beforeEnter === 'function') {
return (
<AsyncBeforeEnter
beforeEnter={beforeEnter}
route={nextProps}
{...props}
{...extraProps}
/>
)
}
return (
route.render && typeof route.render ?
(
route.render({ ...props, ...extraProps, route: nextProps })
) : (
route.component ? (
<route.component
route={nextProps}
{...props}
{...extraProps}
/>
) : null
)
)
}}
/>
))
}
</Switch>
) : null
}
使用就可以调用 renderRoutes 方法 , 该实例摘自官方示例：
const Root = ({ route }) => (
<div>
<h1>Root</h1>
{/* child routes won't render without this */}
{renderRoutes(route.routes)}
</div>
);
const Home = ({ route }) => (
<div>
<h2>Home</h2>
</div>
);
const Child = ({ route }) => (
<div>
<h2>Child</h2>
{/* child routes won't render without this */}
{renderRoutes(route.routes, { someProp: "these extra props are optional" })}
</div>
);
const GrandChild = ({ someProp }) => (
<div>
<h3>Grand Child</h3>
<div>{someProp}</div>
</div>
);
Reactdom.render(
<BrowserRouter>
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</BrowserRouter>,
document.getElementById("root")
);实现类似 vue-router 里面的 route-view 功能
经过以上的处理，基本的钩子函数和静态路由就算配置完成了；功能虽然完成了，但总感觉使用上有点麻烦；确实，有没有类似 vue-router 中的 route-view 这种的一步到位的呢？好的，安排。。。
这里需要用到 React context 在 v16 以前这是不推荐的，不过现在已经成熟了，可以大胆的用了；如果不知道怎么用和什么原理可以 去这里 补一下知识
这里还有一个很关键的地方，看图划重点：
可以重复使用，内部的值会覆盖外层的值，这样我们就可以多层路由嵌套了；
创建 context
import React from 'react'
const RouteContext = React.createContext([])
// devtool 中使用
RouteContext.displayName = 'RouteViewContext'
export const RouteProvider = RouteContext.Provider
export const RouteConsumer = RouteContext.Consumer
创建 RouteView
import { RouteConsumer } from './context'
import renderRoutes from './renderRoutes'
//RouteView
export default () => {
return (
<RouteConsumer>
{/* 使用静态路由渲染 */}
{/* ruotes 由RouteProvider 提供 */}
{routes => renderRoutes(routes)}
</RouteConsumer>
)
}
再次改写 renderRoutes, 使其能够渲染下级路由
import { RouteProvider } from './context'
// renderRoutes
export default (routes, switchProps = {}, extraProps = {}) => {
return routes && routes.length > 0 ? (
<Switch {...switchProps}>
{
routes.map((route, i) => (
<Route
key={route.key || i}
path={route.path}
exact={route.exact}
strict={route.strict}
location={route.location}
sensitive={route.sensitive}
children={route.children}
render={props => {
checkProps(props)
// beforeEnter
const { beforeEnter, ...nextProps } = route
// RouteProvider 提供下级路由所需的数据
if (route.beforeEnter && typeof route.beforeEnter === 'function') {
return (
<RouteProvider value={route.routes}>
<AsyncBeforeEnter
beforeEnter={beforeEnter}
route={nextProps}
{...props}
{...extraProps}
/>
</RouteProvider>
)
}
return (
<RouteProvider value={route.routes}>
{
route.render && typeof route.render ?
(
route.render({ ...props, ...extraProps, route: nextProps })
) : (
route.component ? (
<route.component
route={nextProps}
{...props}
{...extraProps}
/>
) : null
)
}
</RouteProvider>
)
}}
/>
))
}
</Switch>
) : null
}
使用
在入口js添加代码如下
import { RouteProvider, RouteView } from '../router'
// 静态路由
const routes = [
// 略。。。
]
class App extends React.PureComponent {
// 略。。。
render() {
return (
// 略。。。
// 提供顶层路由即可
// 下级路由 renderRoutes 处理
<RouteProvider value={routes}>
<RouteView />
</RouteProvider>
// 略。。。
)
}
}
export default App
二级路由使用
class Example extends React.PureComponent {
// 略。。。
render() {
// 此处便不需要再提供routes了
// 在 renderRoutes 已经由 RouteProvider 提供了
return (
<div>
Example
<RouteView />
</div>
)
}
}
export default Example
通过以上努力，我们就具备了静态路由、钩子函数、类似 vue-router 中 router-view；
最终的努力的结果：
vue路由history模式_如何去除vue项目中的#
在使用vue-cli搭建的环境中，浏览器上URL地址中是存在#的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history
vue路由传参主要的3种方式
vue中路由传参主要的3种方式：query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)
vue动态加载路由_实现vue动态加载路由器设置
我们的通用的后台管理系统中，我们会根据权限的粗细不同，会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现，关于后台接口我就不会涉及，当我接触的时候我们的后台接口是springcloud实现。
两种前端路由的实现方式
前后端分离开发模式，后端会把路由控制丢在前端，这几天再开发单页面小的项目，手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法：history.pushState()和history.replaceState()，和1个事件：window.onpopstate。hash + location.onhashchange
vue动态路由_vue-router通过接口请求动态生成路由的实现
在后台管理系统中，一般都会采用权限管理。路由菜单数据都会保存到数据库中，在vue-router 2.2版本新增了一个router.addRoutes(routes)方法，即可用它来实现动态路由了
HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
vue router 路由鉴权（非动态路由）
原本想用动态路由的思路去做，按权限加载对应路由表，但是由于权限可以交叉（比如一个人可以同时是主题管理员和数据服务管理员），导致权限路由表还是得去做判断组合。于是放弃了这个思路，索性就在beforeEach里直接判断了。
vue中路由按需加载的几种方式
使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢
vue-router 中参数传递（params，query)
query和params的区别，query相当于get请求，在页面跳转的时候，可以在地址栏看到请求参数，然而params则相当于post请求，参数不会在地址栏中显示。
Node.js的路由
当服务端接收到HTTP请求时，可以通过onRequest() 获取到url， pathname，query，及paramParams参数；为了解析这些数据需要使用url和querystring模块
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!