}\n />\n \n );\n }\n ```\n\n ```javascript\n /// home/index.js\n import React from 'react';\n import { RouterView } from 'react-view-router';\n\n export default function HomeIndex() {\n return (\n
\n
HomeIndex
\n \n
\n );\n }\n ```\n\n ```javascript\n /// home/main/index.js\n import React from 'react';\n import { RouterView } from 'react-view-router';\n\n export default function HomeMainIndex() {\n return (\n
\n
HomeMainIndex
\n \n \n
\n );\n }\n ```\n [Named Views](https://router.vuejs.org/zh/guide/essentials/named-views.html#嵌套命名视图)\n\n ```javascript\n /// home/main/some/index.js\n import React from 'react';\n import { withRouteGuards } from 'react-view-router';\n import store from 'store';\n\n class HomeMainSomeIndex extends React.Component {\n constructor(props) {\n super(props);\n this.state = { text: 'text1' };\n }\n\n refresh = () => {\n this.setState({ text: 'text1 refreshed' })\n }\n\n render() {\n let { text } = this.state;\n return (\n
\n
HomeMainSomeIndex
\n { text }\n
\n );\n }\n }\n\n export default withRouteGuards(HomeMainSomeIndex, {\n beforeRouteEnter(to, from, next) {\n if (!store.logined) next('/login');\n else next(vm => vm.refresh());\n },\n beforeRouteLeave(to, from, next) {\n // You can confirm whether to leave here\n next();\n },\n beforeRouteUpdate(to, from) {\n\n },\n afterRouteLeave(to, from) {\n\n },\n });\n ```\n\n ```javascript\n /// home/main/some/footer.js\n import React from 'react';\n\n export default function HomeMainSomeFooter() {\n return (\n
\n
HomeMainSomeFooter
\n
\n )\n }\n ```\n\n ```javascript\n /// login/index.js\n import React from 'react';\n import store from './store';\n import router from './router';\n\n export default function LoginIndex() {\n const doLogin = () => {\n store.logined = true;\n router.push({\n path: '/home',\n query: { aa: 1 }\n }, () => {\n console.log('router.push is complete!');\n }, () => {\n console.log('router.push is abort!');\n });\n };\n\n return (\n
\n
LoginIndex
\n \n
\n );\n }\n ```\n\n\n ## APIs\n\n ### Route Configuration Options\n - `name` Route name, equivalent to alias, the route name should be unique in all route configurations of a router, and can be used to adjust the route, such as: `router.push('[aRouteName]/somepath')`, `name` can contain the following characters: `A-z.\\-_#@$%^&*():|?<>=+`\n - `path` URL string.\n - `component` The component corresponding to the route.\n - `components` The component corresponding to the route, can be used for `named RouterView`, `component` corresponds to `components.default`.\n - `exact` Whether to strictly match `location.pathname`.\n - `redirect` The route will be redirected to a new address, which can be a string, object or function.\n - `index` Default route name, can be a string or function.\n - `children` Nested child route configuration information.\n - `meta` Custom meta information of the route, see: [Route Meta Information](https://router.vuejs.org/zh/guide/advanced/meta.html).\n - `metaComputed` Meta information in the route configuration (computed). When a value in meta is a function, it will be treated as the value of the `RouteMetaFunction` function execution result.\n - `defaultProps` Value is an object, format: `{ aa: 1, bb: '2', cc: true }`, add additional pros parameters when rendering the route component.\n - `props` boolean or object, format: `{ aa: Number, bb: String, cc: Boolean }`, pass the specified attribute in the params parameter of the route as props to the route component, which is an alias of `paramsProps` below.\n - `paramsProps` boolean or object, format: `{ aa: Number, bb: String, cc: Boolean }`, pass the specified attribute in the params parameter of the route as props to the route component.\n - `queryProps` boolean or object, format: `{ aa: Number, bb: String, cc: Boolean }`, pass the specified attribute in the query parameter of the route as props to the route component.\n - `guards` Route guard, refers to `beforeEnter`, `beforeLeave`, `beforeUpdate`, `afterLeave`, see:[Per-Route Guard](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫)\n - `isComplete` boolean, whether the route has completed the interception process. During the route jump process, it is often necessary to redirect processing. For the route object `Route` that has not been finally completed, the `isComplete` will be `false`.\n\n ### RouterView Props\n\n - `name` Used for `named views`, see [vue-router explanation](https://router.vuejs.org/zh/guide/essentials/named-views.html#嵌套命名视图)\n - `filter` Function: `function (routes: Array) { return [] }`, can be used to filter matching routes\n - `fallback` Can be a function: `function ({ parentRoute, currentRoute, inited, resolving, depth }) { return }`, or `React Component Element`, such as: `loading` \n\n ### RouterLink Props\n\n The `RouterLink` component is a component similar to the `Link` component in `react-router`. It can implement route adjustment and highlight itself based on whether it matches the current route.\n\n Usage example:\n\n ```js\n import React from 'react';\n import { RouterLink } from 'react-view-router';\n\n export default function HomeIndex() {\n return (\n
\n Login\n Settings\n
\n );\n }\n ```\n\n #### router: ReactViewRouter\n\n The `ReactViewRouter` instance associated with the `RouterLink`, when the `RouterLink` is at the same level or above the `RouterView`, this property is required; otherwise, the `RouterLink` will automatically find the associated `ReactViewRouter` instance based on the React component hierarchy.\n\n #### to: RouteLocation|string\n \n Represents the link of the target route. When clicked, the value of `to` is immediately passed to `router.push()` or `router.replace()`, so this value can be a string or an object that describes the target location. The object format is:\n\n ```ts\n {\n // Jump route address\n path?: string,\n // Query parameters\n query?: Partial,\n // Dynamic parameters\n params?: Partial,\n // Whether to append to the current route\n append?: boolean,\n // Whether it is an absolute address\n absolute?: boolean | 'hash' | 'browser' | 'memory',\n // The number of steps to go back before the jump route, an integer means forward, a negative number means backward\n delta?: number,\n // If the route to be jumped is already in the history route stack, then go back instead of push/replace, this parameter will be useful when a series of routes are jumped and want to return to the home page without generating new route history\n backIfVisited?: boolean,\n // If this parameter is true, when the `push` or `replace` method is called, if the current `router` is not ready (`!router.isPrepared`) and is in the interceptor processing (`beforeEach`, `beforeRouterEnter`, `beforeRouterLeave`), the interceptor processing will not be resolved, but will be changed to set `pendingRoute`;\n pendingIfNotPrepared?: boolean,\n }\n ```\n\n #### replace: boolean\n \n If the `replace` attribute is set, when clicked, `router.replace()` will be called instead of `router.push()`, so the navigation will not leave a `history` record.\n\n #### append：boolean\n \n After setting the `append` attribute, the base path is added to the current (relative) path. For example, if we navigate from `/a` to a relative path `b`, if `append` is not configured, the path is `/b`, if configured, it is `/a/b`. This attribute is equivalent to `append` in the jump object\n\n #### tag: string|React.ElementType\n\n Sometimes you want the `RouterLink` to be rendered as a certain tag, such as `
`. So we use the `tag` attribute to specify which tag to use, and it will still listen for clicks and trigger navigation.\n\n #### activeClass: string = 'router-link-active'\n\n The class name added when the `RouterLink` matches the current route;\n\n #### exact: boolean\n\n Whether the `RouterLink` component should only be activated in exact match mode. The default class name is based on the inclusion match. For example, if the current path starts with `/a`, the `RouterLink` will also be set with the `CSS` class name. According to this rule, every route will activate the ``! If you want the link to use \"exact match mode\", use the `exact` attribute:\n\n #### exactActiveClass: string = 'exact-active-class'\n\n Configure the `class` that should be activated when the link is exactly matched.\n\n #### event: 'click'|'mouse-enter'|'mouse-leave' and other React-supported component event names = 'click'\n\n Configure the event name that triggers the jump event, which can be any React-supported component event.\n\n #### onRouteChange: (route: Route) => void\n \n Event when the route changes\n\n #### onRouteActive: (route: Route) => void\n \n Triggered when the `RouterLink` component matches the current route\n\n #### onRouteInactive: (route: Route) => void\n \n Triggered when the `RouterLink` component changes from a matching state to a non-matching state\n\n\n ### ReactViewRouter options\n\n The `options` option is used in the creation of the `ReactViewRouter` instance, or the `use`, `start` method parameters. It supports the following parameters:\n\n - `name: string` You can provide a name for this `ReactViewRouter` for easy identification\n\n - `basename: string` The base path of the path component\n\n - `mode: 'hash'|'memory'|'browser'|History` - Route mode\n\n - `hashType: 'slash'|'noslash'` When `mode` is `hash`, configure whether the `hash` path starts with `/`\n\n - `pathname: string` - Used in the `memory` route mode, used to specify the initial route address of the `memory` route\n\n - `history: History` - The `history` object of the `ReactViewRouter`, when not passed, the `ReactViewRouter` will create it internally, this property is generally used when the route is in `memory` mode, by passing its `router.history` to the child application's `ReactViewRouter`, the `memory` route of the child application can be linked with the `memory` route of the parent application.\n\n - `routes: ConfigRoute[]` - All route configuration list\n\n - `queryProps: { [key: string]: (val: string) => any; }` url parameter type conversion object\n\n - `manual: boolean` Whether it is manual mode, which means that the `start` method is not automatically called when `new ReactViewRouter()` is called. In this case, you need to manually call the `start` method to enable the route listener, and the `ReactViewRouter` instance will not start working until the `start` method is called\n\n - `rememberInitialRoute: boolean` Whether to remember the `initialRoute`. When it is `true`, when refreshing the browser page, the `initialRoute` is no longer the route information recorded in the current url, but the route information of the first time retrieved from the sessionStorage. This function is mainly used to solve the problem of losing the initialized url parameters when refreshing the page\n\n - `holdInitialQueryProps: boolean` - Whether to merge the `query` of the initial route (`initialRoute`) into the `query` of the jump route when calling the `push`, `replace` and other route jump methods. This parameter will be more effective in some systems that need to keep the url parameters all the time;\n\n ### ReactViewRouter properties\n\n - `currentRoute` Current matching route information:\n\n ```javascript\n {\n // The operation type of the current route, there are: POP, PUSH, REPLACE\n action: String,\n // The path of the current route\n url: String,\n // The path of the current route, the difference between path and subpath is: path is converted to an absolute path, subpath is equal to the original value\n path: String,\n // Full path, including path and query conditions\n fullPath: String,\n // Whether to strictly match location.pathname\n isExact: Boolean,\n // An array containing all nested route information that the current route accompanies\n matched: [\n route1,\n // route2:\n {\n // From the path in the route configuration, the difference between path and subpath is: path is converted to an absolute path, subpath is equal to the original value\n path: String,\n // From the path in the route configuration\n subpath: String,\n // The meta information in the route configuration\n meta: Object,\n // The meta information in the route configuration (computed)\n metaComputed: Object,\n // The state information of the route, you can update the state of the specified matchedRoute by calling `router.replaceState(state: State, matchedRoute?: MatchedRoute)`\n state: Object,\n // The redirect in the route configuration\n redirect: String|Object|Function,\n // The original route configuration object\n config,\n // The component instance that matches this route\n componentInstances: {\n default: React.Component,\n /* others: React.Component */\n }\n // The RouterView instance that matches this route\n viewInstances: {\n default: RouterView\n }\n }\n ..., \n routeN\n ],\n // A key-value pair obtained by parsing the url\n params: Object,\n // A key-value pair obtained by parsing the query parameters after the url's ?. For example: /foo?user=1, then currentRoute.query.user == 1. If there are no query parameters, it is an empty object.\n query: Object,\n // The meta information of the current route, equivalent to matched[matched.length - 1].meta\n meta: Object,\n // The meta information in the route configuration (computed)\n metaComputed: Object,\n // The state information of the current route, equivalent to matched[matched.length - 1].state\n state: Object,\n // Indicates whether this route is redirected from another route\n redirectedFrom: Object,\n // The cancellation callback function from `router.push`, `router.replace`, `router.redirect` routes\n onAbort: Function,\n // The completion callback function from `router.push`, `router.replace`, `router.redirect` routes\n onComplete: Function,\n }\n ```\n\n\n\n\nSee: [Route Object Properties](https://router.vuejs.org/api/#route-object-properties)\n\n### ReactViewRouter Instance Properties\n\n- `id` - Route instance id, a number used to identify the uniqueness of a route instance;\n\n- `name` - Route instance name, when creating a route instance, you can pass a `name` parameter to give the route instance a name for easy identification;\n\n- `currentRoute` - The current route information that matches the current url.\n\n- `initialRoute` - The initial route object when the instance is created.\n\n- `prevRoute` - The previous route information.\n\n- `mode` - Route mode, values are: `hash`, `browser`, `memory`.\n\n- `basename` - The route prefix of the current route instance, when not empty, it always ends with `/`;\n\n- `basenameNoSlash` - The route prefix of the current route instance, when not empty, it never ends with `/`;\n\n- `parent` - The parent route instance of the current route instance (if any);\n\n- `top` - The top-level route instance of the current route instance, when equal to itself, it means that it is the top-level route instance;\n\n- `children` - The list of child route instances of the current route instance;\n\n- `viewRoot` - The root `RouterView` associated with the current route instance;\n\n- `stacks: { index: number, pathname: string, search: string, timestamp: number }[]` - Route stack, which contains the route information that has been jumped through, you can view which routes have been jumped through on the current page through it, you can `forward/back` to this route through the `go` method, or get all the route configurations that match this route through `getMatched`. Example:\n\n ```js\n let stack = router.stacks.find(v => v.pathname.startsWith('/home'));\n if (stack) {\n let matched = router.getMatched(stack);\n // If it is the home page, go back to that page\n if (matched.some(r => r.meta.isHome)) router.go(stack);\n }\n ```\n\n- `isRunning` - Whether the `router` instance is in running state, when it is `false`, it will not respond to route events;\n\n- `isRunning` - Whether the `router` instance is in running state, when it is `false`, it will not respond to route events;\n\n- `isPrepared` - Whether the current route is ready - `root route`, `currentRoute` has been generated;\n\n- `isHistoryCreator` - Whether it is the creator of the internal `history`;\n\n- `isBrowserMode` - Whether it is the `browser` route mode;\n\n- `isHashMode` - Whether it is the `hash` route mode;\n\n- `isMemoryMode` - Whether it is the `memory` route mode;\n\n### ReactViewRouter Instance Methods\n\n#### `beforeEach` [Global Before Guard](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)\n\n```js\nconst router = new ReactViewRouter({ ... })\n\nrouter.beforeEach((to, from, next) => {\n // ...\n})\n```\n\nWhen a navigation is triggered, the global before guard is called in the order of creation. The guard is asynchronously resolved and executed, and the navigation is in a waiting state until all guards are resolved.\n\nEach guard method receives three parameters:\n\n- `to: Route`: The target [route object](#ReactViewRouter-properties) that is about to enter\n\n- `from: Route`: The current route that is about to leave\n- `next: Function`: You must call this method to resolve this hook. The execution effect depends on the call parameter of the next method.\n\n - `next()`: Proceed to the next hook in the pipeline. If all hooks are executed, the navigation state is confirmed.\n\n - `next(false)`: Abort the current navigation. If the URL of the browser changes (may be due to user manual or browser back button), the URL address will be reset to the address corresponding to the from route.\n\n - `next('/')` or `next({ path: '/' })`: Jump to a different address. The current navigation is aborted, and then a new navigation is performed. You can pass any location object to next, and allow options such as `replace: true`.\n\n - `next(error)`: If the parameter passed to next is an Error instance, the navigation will be terminated and the error will be passed to the callback registered with `router.onError()`.\n\nMake sure that the next function is strictly called once in any given navigation guard. It can appear more than once, but only when all logical paths do not overlap, otherwise the hook will never be resolved or an error will be reported.\n\n** Here is an example of redirecting to /login when the user fails to authenticate:\n\n```js\n// BAD\nrouter.beforeEach((to, from, next) => {\n if (to.path !== '/login' && !isAuthenticated) next({ name: 'Login' })\n // If the user fails to authenticate, `next` will be called twice\n next()\n})\n```\n\n```js\n// GOOD\nrouter.beforeEach((to, from, next) => {\n if (to.path !== '/login' && !isAuthenticated) next({ path: '/login' })\n else next()\n})\n```\n\nNote: In beforeEach, calling `router.push`, `router.replace`, `router.redirect`, etc. is equivalent to calling next. That is, the effects of the following 2 writings are the same:\n\n```js\nfunction checkLogin(next) {\n if (to.path !== '/login' && !isAuthenticated) {\n next({ path: '/login' });\n return false;\n }\n return true;\n}\n\nrouter.beforeEach((to, from, next) => {\n if (!checkLogin(next)) return;\n next()\n})\n```\n\n```js\nfunction checkLogin() {\n if (to.path !== '/login' && !isAuthenticated) {\n router.push({ path: '/login' });\n return false;\n }\n return true;\n}\n\nrouter.beforeEach((to, from, next) => {\n if (!checkLogin()) return;\n next()\n})\n```\n\n#### `beforeResolve` [Global Resolve Guard](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-resolve-guards)\n\nYou can use router.beforeResolve to register a global guard. This is similar to router.beforeEach, but the difference is that `beforeResolve` is called after all component guards and asynchronous route components are resolved, but before the navigation is confirmed.\n\n#### `afterEach` [Global After Hook](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks)\n\nYou can also register global after hooks, but unlike guards, these hooks do not accept the next function and do not change the navigation itself:\n\n```js\nrouter.afterEach((to, from) => {\n // ...\n})\n```\n\n#### `push`, `replace`, `go`, `back`, `forward` `redirect` [Programmatic Navigation](https://router.vuejs.org/guide/essentials/navigation.html)\n\nThe parameters of these methods can be a string path or an object describing the address. For example:\n```js\n// String, relative path\nrouter.push('home')\n// String, absolute path\nrouter.push('/home')\n\n// Object\nrouter.replace({ path: '/home' })\n\n// Jump from the previous route\nrouter.push({ path: '../home' });\n\n// With dynamic parameters\nrouter.push({ path: '/user', params: { userId: '123' }})\n\n// With query parameters, becomes /register?plan=private\nrouter.push({ path: '/register', query: { plan: 'private' }})\n\n// When the router's basename is not empty, if you want to ignore the basename when jumping, you can add an absolute parameter\nrouter.push({ path: '/register', absolute: true, query: { plan: 'private' }})\n\n// Jump by route name\nrouter.push({ path: '[a-route-name]/register', })\n\n// Return to the previous route\nrouter.go(-1);\n\n// Equivalent to router.replace, but the route object will have an additional flag isRedirect: true\nrouter.redirect({ path: '/home' })\n\n// Go back two steps first, then jump to the home route\nrouter.push({ path: '/home', delta: -2 });\n\n// Jump to an external address, equivalent to location.href = ''\nrouter.push('http://www.baidu.com')\n```\n\nYou can choose to provide `onComplete` and `onAbort` callbacks as the second and third parameters in `router.push` or `router.replace`. These callbacks will be called when the navigation is successfully completed (after all asynchronous hooks are resolved) or aborted (navigate to the same route, or navigate to another route before the current navigation is completed). The second and third parameters can be omitted, in which case if `Promise` is supported, `router.push` or `router.replace` will return a `Promise`.\n\nThe first parameter object format of `router.push`, `router.replace`, `router.redirect` supports the following parameters:\n```ts\n{\n // Adjusted path, can be a complete url, or a path starting with `/`, or a relative path like `./` or `../`\n path?: string,\n // Query parameters, the parameter part after the `?` in the url\n query?: Partial,\n // When path is not a complete url, and does not start with `/`, `./`, `../`, path will be recognized as the last subpath of the current path to be replaced. When append is true, it means to append after the current path.\n append?: boolean,\n // When the router's basename is not empty, except for the complete url, the basename will be added before the final jump path. If you don't want the router to add, you can set absolute to true\n // absolute can also take the value 'hash' | 'browser' | 'memory', the router defaults to the same mode as the parent route, but when the router is in memory mode, it is unable to infer the mode of the sub route, you can set the parent route mode through absolute to facilitate the router to recognize the way to jump\n absolute?: boolean|string,\n // Indicates that before jumping to this path, first go forward/back `delta` steps in the route history and then jump\n delta?: number,\n // The reference route when the path is a relative path like `./` or `../`, in the ReactViewLike component, you can get it through this.$matchedRoute\n route?: ConfigRoute,\n}\n```\n\n#### `parseQuery`, `stringifyQuery` \n\nInternal url query parse/stringify methods, can be overridden by `new ReactViewRouter({ parseQuery: parseQueryMethod, stringifyQuery: stringifyQueryMethod });`.\n\nNote: The default parser will parse `true`, `false`, `null`, `undefined`, `JSON object/array` in the query of the query into the corresponding type, not string.\n\n### `createRoute(to: string | object, options: { from?: object, action?: string, matchedProvider?: object })`\n\nTransform the route information of type `string`, `{ path: string, query: {} }` into the same format as `router.currentRoute`, and the `matched` has been parsed, you can use it to get the route configuration information that matches this address.\n\n### `nameToPath(name: string, options: { absolute?: boolean }|RouteHistoryLocation = {}) => string `\n\nConvert a route name to the corresponding path, you can use this method to determine if a route name exists. `options.absolute` indicates whether it is an absolute path, if it is, it will also be searched from the parent route.\n\n### `resolveRouteName(fn: RouteResolveNameFn) => () => void`\n\nRegister a route name resolution function, when `nameToPath` cannot find the corresponding route name from the route configuration, these resolution functions will be called to resolve. The return value is a callback function used to unregister this resolution function.\n\nThe function signature `RouteResolveNameFn` format is:\n```ts\n (name: string, options: { absolute?: boolean }|RouteHistoryLocation, router: ReactViewRouter) => string|null|void\n```\nWhen the resolution function returns a value that is not `null` or `undefined`, it means that the corresponding path of the route name is found, and the return value will be returned as the path of the route name\n\n- Note: If `options.absolute` is `true`, please handle its `basename` by yourself.\n\n### `getMatched(to: string | object, from?: object, parent?: object)`\n\nGet all route configurations that the route information of type `string`, `{ path: string, query: {} }` can match, you can do something with the information obtained from the matched route configuration. Here is an example of the application of this method in a practical scenario:\n\n ```js\n /**\n * Get the current menu path based on the route, for example: tax declaration >> declaration overview, used as the input parameter for online consultation\n * @param {Object} route Current route\n */\n getCurrentMenuPosition(route) {\n let position = '';\n route = route || router.currentRoute;\n if (!route.query.redirect) return position;\n const rs = router.getMatched(route.query.redirect).filter((r) => r.meta.title);\n if (rs.length) {\n position = rs.reduce((p, c) => {\n let title = c.meta.title;\n return (p ? `${p}>>${title}` : title);\n }, '');\n }\n return position;\n },\n ```\n\n### `replaceState(newState: Partial, matchedRoute?: MatchedRoute)`\n\nUpdate the `state` of the current route (`currentRoute`) or the specified `matchedRoute`, so that when you go back from other pages to this route, you can get the state value set at that time through `router.currentRoute.state` or `router.currentRoute.matched[N].state`.\n\n```js\nimport React, { useEffect } from 'react';\nimport router from '@/router';\n\nfunction Test() {\n const setRouteState = () => {\n router.replaceState({ haha: 1, a: '1' });\n }\n\n useEffect(() => {\n console.log(router.currentRoute.state);\n }, []);\n\n return
\n \n
;\n}\n```\n\n### `replaceQuery(keyOrObj: string, value?: any)`\n\nUpdate the specified parameter in the `query` of the current route (`currentRoute`). If the `router`'s `mode` is `browser|hash`, it will also update the corresponding parameter on the url;\n\n```js\nimport React, { useEffect } from 'react';\nimport router from '@/router';\n\nfunction Test() {\n const updateQueryTest = () => {\n router.replaceQuery('test', 1);\n }\n\n const updateQueryObj = () => {\n router.replaceQuery({\n test: 1,\n aaa: 2\n });\n }\n\n return
\n \n \n
;\n}\n```\n\n#### `plugin(plugin: ReactViewRoutePlugin): () => void`\n\nRegister a `ReactViewRouter` plugin, this plugin can be used to listen to various events in the route and do some processing. Such as:\n\n```js\nconst uninstall = router.plugin({\n name: 'a-router-plugin',\n onRouteChange(route, router) {\n console.log('route changed', route);\n })\n});\n\n...sometimes...\nuninstall();\n\n```\n\nNote: If the plugin name is the same, it will be recognized as the same plugin. When registering this plugin, the plugin with the same name will be uninstalled first, and then registered again.\n\nThe plugin supports the following methods:\n\n```ts\ntype onRouteChangeEvent = (route: Route, prevRoute: Route, router: ReactViewRouter, prevRes?: any) => void;\n\ntype onRouteMetaChangeEvent = (newVal: any, oldVal: any, route: ConfigRoute, router: ReactViewRouter, prevRes?: any) => void;\n\ninterface ReactViewRoutePlugin {\n // Plugin name\n name: string;\n // Plugin installation method, will be called when `router.plugin()` method is called\n install?(router: any): void;\n // Plugin uninstallation method, will be called when the same name plugin is found when registering the plugin with `router.plugin()`, and then registered again. Or when the uninstall method returned by `router.plugin()` is called, the uninstall method will also be called\n uninstall?(router: any): void;\n\n // Called when the route listening is started\n onStart?(router: ReactViewRouter, routerOptions: ReactViewRouterOptions, isInit: boolean|undefined, prevRes?: any): void;\n // Called when the route listening is stopped\n onStop?(router: ReactViewRouter, isInit: boolean|undefined, prevRes?: any): void;\n\n // Triggered when router.routes changes (use set routes, call addRoutes to add routes), when routes === originRoutes, it means that new routes are added in the original routes;\n onRoutesChange?(\n routes: ConfigRouteArray,\n originRoutes: ConfigRouteArray,\n parent?: ConfigRoute|null,\n parentChildren?: ConfigRouteArray,\n prevRes?: any\n ): void;\n\n // Triggered when router.push, router.replace, router.redirect methods are called, you can interrupt the default route jump behavior in this event, and change to your own operation;\n onRouteGo?(\n to: RouteHistoryLocation,\n onComplete: (res: any, _to: Route|null) => void,\n onAbort: (res: any, _to: Route|null) => void,\n isReplace: boolean,\n prevRes?: any\n ): void|boolean;\n\n // Route enter guard event\n onRouteEnterNext?(route: MatchedRoute, ci: React.Component, prevRes?: any): void;\n // Route leave guard event\n onRouteLeaveNext?(route: MatchedRoute, ci: React.Component, prevRes?: any): void;\n // Called before and after the route changes, when the route is being parsed, and the judgment of whether the route can be jumped is in progress\n onRouteing?(next: (ok: boolean|onRouteingNextCallback|Route) => void, prevRes?: any): void;\n // Triggered when the route changes\n onRouteChange?: onRouteChangeEvent;\n // Triggered when the route meta changes\n onRouteMetaChange?: onRouteMetaChangeEvent;\n // Called when the real route component is obtained when parsing asynchronous route lazy loading\n onLazyResolveComponent?(\n nc: React.ComponentType|React.ForwardRefExoticComponent,\n route: ConfigRoute,\n prevRes?: any\n ): React.ComponentType | undefined;\n // Called when registering routes in the router, called when the route is not in the routes for the first time when the router first traverses the routes\n onWalkRoute?(route: ConfigRoute, routeIndex: number, routes: ConfigRouteArray, prevRes?: any): void;\n\n onGetRouteComponentGuards?(\n interceptors: RouteGuardInterceptor[],\n route: ConfigRoute,\n component: any,\n componentKey: string,\n guardName: string,\n options: {\n router: ReactViewRouter,\n onBindInstance?: OnBindInstance,\n onGetLazyResolve?: OnGetLazyResolve,\n toResolve: RouteComponentToResolveFn,\n getGuard: (obj: any, guardName: string) => any,\n replaceInterceptors: (newInterceptors: any[], interceptors: RouteGuardInterceptor[], index: number) => any[]\n },\n prevRes?: any\n ): void|boolean;\n\n // Called when the route adjustment is aborted\n onRouteAbort?(to: Route, reason?: any, prevRes?: any): void;\n\n onViewContainer?(container: ReactViewContainer|undefined, options: {\n routes: MatchedRoute[],\n route: MatchedRoute,\n depth: number,\n router: ReactViewRouter,\n view: RouterViewComponent,\n }, prevRes?: ReactViewContainer): ReactViewContainer|void;\n}\n\n```\n#### `install` The method of loading the `ReactVueLike` plugin. See: [ReactVueLike](https://github.com/gxlmyacc/react-vue-like)\n\n```js\nimport vuelike from '@/vuelike';\nimport ReactViewRouter from 'react-view-router';\n\nconst router = new ReactViewRouter();\n\nvuelike.use(router);\n```\n\n\n### Exported other methods\n- `withRouteGuards` Guard method of route component:\n\n```js\n/**\n * Route component guard registration method\n * @param {Object} component - Route component\n * @param {Object} guards - Guard method\n * @param {Class} [componentClass] - If provided, routes will be treated as its child route configuration information\n * @return {RouteComponentGuards} - Route component that can be used as `React.forwardRef`\n **/\nfunction withRouteGuards(component, guards = {}, componentClass?) {}\n```\n\nExample：\n\n```js\nimport React from 'react';\nimport { RouterView, withRouteGuards } from 'react-view-router';\n\nfunction HomeIndex() {\n return (\n
;\n\n/**\n * Route component lazy loading method\n * @param {LazyImportMethod} importMethod - webpack's import lazy loading method, Example: () => import('@/components/some-component')\n * @return {RouteLazy} - The return value can be used as the component/components value in the route configuration to achieve lazy loading\n **/\nfunction lazyImport(importMethod: LazyImportMethod, options?: Partial): RouteLazy;\n```\n\n- `normalizeRoutes` Normalize route configuration:\n```ts\n/**\n * Normalize route configuration\n * @param {UserConfigRoute[]} routes - Route configuration to be normalized\n * @param {ConfigRoute} [parent] - If provided, routes will be treated as its child route configuration information\n * @return {ConfigRouteArray} - Normalized route configuration\n **/\nfunction normalizeRoutes(routes: UserConfigRoute[], parent?: ConfigRoute): ConfigRouteArray;\n```\n- `normalizeLocation` Normalize the route string or object to a unified format route object:\n```javascript\n/**\n * Normalize the route string or object to a unified format route object\n * @param {Object|string} to - Address object to be normalized\n * @param {Object} [options] - Other options\n * @param {Object} [options.route] The parent route of the address object, if provided, the relative path in the route will be resolved based on it\n * @return {Object} - Normalized route object: { path: string, pathname: string, search: string, query: Object, ...custom props } \n **/\nfunction normalizeLocation(to, options: { route? } = {}) {}\n```\n\n- `isLocation` Determine if `v` is a route object\n```javascript\n/**\n * Determine if `v` is a route object\n * @param {Object} v - Object to be determined\n * @return {boolean}\n **/\nfunction isLocation(v) {}\n```\n\n- `matchPath` Just re-export, see: [matchPath](https://reacttraining.com/react-router/web/api/matchPath)\n\n\n- `createRouterLink` - Create a `router-link` component based on a `router`. You can create this component while creating the `router`:\n\n ```js\n import ReactViewRouter, { createRouterLink } from 'react-view-router';\n\n const router = new ReactViewRouter();\n \n const RouterLink = createRouterLink(router);\n\n export {\n RouterLink\n }\n\n export default router;\n ```\n\n- `createRouteGuardsRef` Create a route guard reference\n\n This method is used when the user does not want to use `useRouteGuardsRef`, but wants to create a compatible instance equivalent to `useRouteGuardsRef` directly using `useImperativeHandle`.\n\n Example:\n ```js\n import React, { useImperativeHandle } from 'react';\n import { createRouteGuardsRef } from 'react-view-router';\n import modals from '~/utils/modals';\n\n const Test = React.forwardRef((props, ref) => {\n const inputRef = useRef();\n\n useRouteGuardsRef(\n ref, \n () => createRouteGuardsRef({\n async beforeRouteLeave(to, from, next) {\n console.log('Test beforeRouteLeave', to, from);\n try {\n await modals.confirm({ content: 'Are you sure you want to leave?' });\n next();\n } catch (ex) {\n next(false);\n }\n },\n beforeRouteUpdate(to, from) {\n console.log('Test beforeRouteUpdate', to, from);\n },\n\n focus: () => {\n inputRef.current.focus();\n },\n })\n );\n\n return (\n return ;\n );\n });\n\n export default Test;\n ```\n\n- `readRouteMeta` Read a value of `meta` in ConfigRoute, when the value is a function, it will be treated as\n ```ts \n function (route: ConfigRoute, routes: ConfigRoute[], props: Partial): any\n ```\ncallback and return its return value;\n\n ```javascript\n /**\n * @param {ConfigRoute} route - ConfigRoute to read meta\n * @param {string} key - Parameter name to read meta\n * @param {props: Partial} props - Will be passed as the third parameter to the value function of meta\n * @return {any}\n **/\n function readRouteMeta(route: ConfigRoute, key: string = '', props: {\n router?: ReactViewRouter|null,\n [key: string]: any\n } = {}): any\n ```\n\n## HOCS/HOOKS\n\n`react-view-router` also supports HOC/HOOKS\n\n### HOCS\n\n### withRouter\n\nGet the router instance, the function signature is as follows:\n\n```javascript\n/**\n * @param {React.ComponentType} Comp - The component to be wrapped \n * @param {object} [options] - Options \n * @param {boolean} [options.withRoute] - Whether to also get the current route object\n * @return {React.ComponentType}\n **/\nconst withRouter = (Comp: React.ComponentType, { withRoute: boolean = false }) => React.ComponentType\n```\n\n### withRoute\n\nGet the route object, the function signature is as follows:\n\n```javascript\n/**\n * @param {React.ComponentType} Comp - The component to be wrapped \n * @param {object} [options] - Options \n * @param {boolean} [options.withRouter] - Whether to also get the current router instance\n * @return {React.ComponentType}\n **/\nconst withRoute = (Comp: React.ComponentType, { withRouter: boolean = false }) => React.ComponentType\n```\n\n### withMatchedRoute\n\nGet the matchedRoute object of the current level, the function signature is as follows:\n\n```javascript\n/**\n * @param {React.ComponentType} Comp - The component to be wrapped \n * @param {object} [options] - Options \n * @param {boolean} [options.withMatchedRouteIndex] - Whether to also get the current level index\n * @return {React.ComponentType}\n **/\nconst withMatchedRoute = (Comp: React.ComponentType, { withMatchedRouteIndex: boolean = false }) => React.ComponentType\n```\n\n### withMatchedRouteIndex\n\nGet the current level index, the function signature is as follows:\n\n```javascript\n/**\n * @param {React.ComponentType} Comp - The component to be wrapped \n * @param {object} [options] - Options \n * @param {boolean} [options.withMatchedRoute] - Whether to also get the matchedRoute object of the current level\n * @return {React.ComponentType}\n **/\nconst withMatchedRouteIndex = (Comp: React.ComponentType, { withMatchedRoute: boolean = false }) => React.ComponentType\n```\n\n### withRouterView\n\nGet the RouteView instance of the current level, the function signature is as follows:\n\n```javascript\n/**\n * @param {React.ComponentType} Comp - The component to be wrapped \n * @param {object} [options] - Options\n * @return {React.ComponentType}\n **/\nconst withRouterView = (Comp: React.ComponentType, {}) => React.ComponentType\n```\n\n### HOOKS\n\n### useRouter\n\nGet the router instance, the function signature is as follows:\n\n```javascript\n/**\n * @return {ReactViewRouter|null}\n **/\nconst useRouter = (defaultRouter?: ReactViewRouter|null) => ReactViewRouter|null\n```\n\n### useRoute\n\nGet the route object, the function signature is as follows:\n\n```javascript\n/**\n * @param {ReactViewRouter} [defaultRouter] The default route management component, when not passed, it will be found according to the context\n * @param {object} [options] Matching options\n * @param {boolean} [options.watch] Whether to monitor route changes\n * @param {number|boolean = false} [options.delay] Whether to asynchronously notify route changes when the route changes\n * @param {boolean = true} [options.ignoreSamePath] If the route fullPath before and after the route changes is the same, the component will not be re-rendered\n * @return {Route}\n **/\nconst useRoute = (\n defaultRouter?: ReactViewRouter|null, \n options?: { \n watch?: boolean,\n delay?: boolean|number,\n ignoreSamePath?: boolean\n }\n) => Route\n```\n\n### useRouteMeta\n\nGet the route meta information of the current route level, you can read the information in it and modify it.\n\n```javascript\n/**\n * @return {Route}\n **/\nconst useRouteMeta = (key: string|string[]): [Partial, (key: string|string[], value: any) => void]\n```\n\nExample:\n```js\nimport { useRouteMeta } from 'react-view-router';\n\nfunction Test() {\n const [title, setTitle] = useRouteMeta('title');\n\n return <>\n setTitle('Title has been modified')}\n >Modify title\n
{title}
\n \n}\n```\n\n### useRouteMetaChanged\n\nRegister a route meta information change event, this method is quite useful in components that generate data through route meta information\n\n```javascript\n/**\n * @return {Route}\n **/\nconst useRouteMetaChanged = (router: ReactViewRouter, onChange: onRouteMetaChangeEvent, depMetaKeys: string[] = [])\n```\n\nExample:\n```js\nimport React, { useState } from 'react';\nimport { useRouter, useMatchedRoute, useRouteMetaChanged } from 'react-view-router';\n\nfunction Test() {\n const router = useRouter();\n const matchedRoute = useMatchedRoute();\n const [title, setTitle] = useRouteMeta('title');\n \n useRouteMetaChanged(router, (newVal, oldVal, route) => {\n console.log('title changed');\n }, ['title']);\n\n return <>\n setRouteMeta('title', 'Title has been modified')}\n >Modify title\n
{title}
\n \n}\n```\n\n### useMatchedRoute\n\nGet the matchedRoute object of the current level, the function signature is as follows:\n\n```javascript\n/**\n * @param {ReactViewRouter} [defaultRouter] The default route management component, when not passed, it will be found according to the context\n * @param {object} [options] Matching options\n * @param {number = 0} [options.matchedOffset] The offset of the matched matchedRoute (forward)\n * @param {string} [commonPageName] The meta name of the common route, if commonPageName is not empty and the attribute value of this name in the meta of currentRoute is true, and currentRoute.query.redirect is not empty, the matchedRoute will be parsed from currentRoute.query.redirect\n * @param {boolean = true} [options.watch] Whether to monitor route changes\n * @param {number|boolean = false} [options.delay] Whether to asynchronously notify route changes when the route changes\n * @param {boolean = true} [options.ignoreSamePath] If the route fullPath before and after the route changes is the same, the component will not be re-rendered\n * @return {MatchRoute}\n **/\nconst useMatchedRoute = (\n defaultRouter?: ReactViewRouter|null, \n options?: { \n matchedOffset?: number, \n watch?: boolean,\n delay?: boolean|number,\n ignoreSamePath?: boolean \n }\n) => MatchedRoute\n```\n### useMatchedRouteIndex\n\nGets the index of the current level, the function signature is as follows:\n\n```javascript\n/**\n * @param {ReactViewRouter} [defaultRouter] The default route management component, when not passed, it will be found according to the context\n * @param {number} [matchedOffset] The offset of the matched matchedRoute (forward), default value is 0\n * @return {number}\n **/\nconst useMatchedRouteIndex = (matchedOffset?: number = 0) => number\n```\n\n### useRouterView\n\nGets the RouteView instance of the current level, the function signature is as follows:\n\n```javascript\n/**\n * @return {RouterView}\n **/\nconst useRouterView = () => RouterView\n```\n\n### useRouteGuardsRef\n\nThis method wraps the `useImperativeHandle` hooks, you can register route guards through this method.\n\n```javascript\n/**\n * @param {Ref} ref The ref obtained through React.forwardRef\n * @param {T|(() => T)} guards The route guard object, supports beforeRouteLeave, beforeRouteResolve, afterRouteLeave, beforeRouteUpdate guards\n * @param {DependencyList} deps The deps passed to useImperativeHandle\n * @return {void} \n **/\nfunction useRouteGuardsRef(\n ref: Ref|undefined,\n guards: T|(() => T),\n deps: DependencyList = []\n): void\n```\n\nExample:\n\n```js\nimport React from 'react';\nimport { useRouteGuardsRef } from 'react-view-router';\nimport modals from '~/utils/modals';\n\nconst Test = React.forwardRef((props, ref) => {\n useRouteGuardsRef(ref, {\n async beforeRouteLeave(to, from, next) {\n console.log('Test beforeRouteLeave', to, from);\n try {\n await modals.confirm({ content: 'Are you sure you want to leave?' });\n next();\n } catch (ex) {\n next(false);\n }\n },\n beforeRouteUpdate(to, from) {\n console.log('Test beforeRouteUpdate', to, from);\n },\n });\n\n return (\n
\n something\n
\n );\n});\n\nexport default Test;\n\n```\n\nNote: Do not mix `useRouteGuardsRef` and `useImperativeHandle` in a functional component.\n\n### useRouteChanged\n\nRegisters a route change callback event for the specified `router`, the function signature is as follows:\n\n```ts\n/**\n * @return {RouterView}\n **/\nconst useRouteChanged = (router: ReactViewRouter, onChange: onRouteChangeEvent) => void\n```\nExample:\n\n```js\nimport { useRouter, useRouteChanged } from 'react-view-router';\n\nconst router = useRouter();\nuseRouteChanged(router, (route) => {\n const path = route.matched[0] && route.matched[0].subpath;\n if (path !== activeTab && tabs.some((tab) => tab.key === path)) {\n setActiveTab(path);\n }\n});\n```\n\n### useViewActivate\n\nWhen the current route component has enabled keepAlive and will trigger an activation event when re-entering;\n\n```ts\ninterface KeepAliveEventObject {\n type: keyof RouterViewEvents,\n router: ReactViewRouter,\n source: RouterView,\n target: MatchedRoute,\n to: MatchedRoute|null,\n from: MatchedRoute|null,\n}\n\ntype KeepAliveChangeEvent = (event: KeepAliveEventObject) => void;\n/**\n * @return {RouterView}\n **/\nconst useViewActivate = (onEvent: KeepAliveChangeEvent) => void\n```\nExample:\n\n```js\nimport { useViewActivate } from 'react-view-router';\n\nuseViewActivate((event) => {\n // dosomething\n});\n```\n\n### useViewDeactivate\n\nWhen the current route component has enabled keepAlive and will trigger a deactivation event when leaving the current route;\n\n```ts\ninterface KeepAliveEventObject {\n type: keyof RouterViewEvents,\n router: ReactViewRouter,\n source: RouterView,\n target: MatchedRoute,\n to: MatchedRoute|null,\n from: MatchedRoute|null,\n}\n\ntype KeepAliveChangeEvent = (event: KeepAliveEventObject) => void;\n/**\n * @return {RouterView}\n **/\nconst useViewDeactivate = (onEvent: KeepAliveChangeEvent) => void\n```\nExample:\n\n```js\nimport { useViewDeactivate } from 'react-view-router';\n\nuseViewDeactivate((event) => {\n // dosomething\n});\n```\n\n### useRouteTitle\n\nIterates through the route configuration to find the information filtered out by `meta.title` and `meta.visible` in the route configuration of the current level, where `meta.title` and `meta.visible` can be a function. You can use this information to create menus, tabs, etc. The function signature is as follows:\n\n```ts\n// `meta.title` and `meta.visible` can be boolean values, or functions like this\ntype RouteMetaFunction = (route: ConfigRoute, routes: ConfigRouteArray, props: {\n router?: ReactViewRouter|null,\n level?: number,\n maxLevel?: number,\n refresh?: () => void\n [key:string]: any\n}) => T;\n\ntype RouteTitleInfo = {\n title: string;\n path: string;\n meta: Partial;\n route: ConfigRoute;\n children?: RouteTitleInfo[];\n};\n\ntype filterCallback = (r: ConfigRoute, routes: ConfigRouteArray, props: {\n router: ReactViewRouter\n level: number,\n maxLevel: number,\n refresh: () => void,\n title?: string,\n visible?: boolean\n}) => boolean;\n\ntype RouteTitleProps = {\n // The maximum search level of useRouteTitle\n maxLevel?: number,\n // Custom filtering for the filtered title information\n filter?: filterCallback,\n // Specify the meta parameter name in ConfigRoute that the filter depends on, so that they can trigger updates when they are updated\n filterMetas?: string[],\n /**\n * Whether it is manual mode, when true, the first time useRouteTitle is called, it will not actively search for ConfigRoute, until you call refreshTitles once,\n * You can implement an asynchronous display of menus, tabs, etc. through this parameter\n **/\n manual?: boolean,\n // The offset of the matched matchedRoute (forward), default value is 0\n matchedOffset?: number;\n // The key value of the common page meta, default is 'commonPage'. That is, when a matched route's meta contains commonPage: true and router.currentRoute.query.redirect is not empty, the parsing of titles will be re-parsed from router.currentRoute.query.redirect\n commonPageName?: string;\n}\n\ntype RouteTitleResult = {\n titles: RouteTitleInfo[];\n setTitles: (titles: RouteTitleInfo[]) => void;\n\n currentPaths: string[];\n setCurrentPaths: (currentPaths: string[]) => void;\n\n refreshTitles: () => void;\n}\n\n/**\n * @param {RouteTitleProps} props Parameters\n * @param {ReactViewRouter} defaultRouter The default route instance\n * @param {DependencyList} deps The deps passed to useRouteTitle\n * @return {RouteTitleResult} \n **/\nfunction useRouteTitle(\n props: RouteTitleProps = {},\n defaultRouter?: ReactViewRouter,\n deps: any[] = []\n): RouteTitleResult;\n```\nLeft menu example:\n\n```js\nimport React, { useMemo, useEffect } from 'react';\nimport {\n useRouter, useRouteTitle,\n} from 'react-view-router';\nimport { observer } from 'mobx-react';\nimport { LeftMenu } from '@/ui';\nimport store from '@/store';\n\nconst MainLeft = observer(() => {\n const { companyId } = store.state.company;\n\n const router = useRouter();\n const {\n titles,\n currentPaths: currentMenus,\n refreshTitles,\n } = useRouteTitle({ \n // Start searching for matching titles from the level below the current component\n maxLevel: 2 \n });\n\n const menus = useMemo(() => {\n const getMenus = (list = []) => list.map((item) => {\n const { title, meta, path } = item;\n return {\n text: title,\n key: path,\n icon: meta.icon ? : null,\n children: getMenus(item.children),\n };\n });\n return getMenus(titles);\n }, [titles]);\n\n useEffect(() => {\n if (titles.length) refreshTitles();\n }, [companyId]);\n\n const parentPaths = currentPaths.length > 1\n ? currentPaths.slice(0, currentPaths.length - 1)\n : currentPaths;\n const currentPath = currentPaths.length ? currentPaths[currentPaths.length - 1] : null;\n\n return (\n router.push(path)}\n />\n );\n});\n\nexport default MainLeft;\n```\n\nTab Bar Example:\n\n```js\nimport React from 'react';\nimport router from '@/history';\nimport { useRouter, RouterView, useRouteTitle } from 'react-view-router';\nimport { Tabs } from '@/ui';\n\nconst { TabPane } = Tabs;\n\nfunction MainHeader(props) {\n const router = useRouter();\n const {\n titles,\n currentPaths: [currentPath],\n } = useRouteTitle({ maxLevel: 1 }, router);\n\n return (\n
\n );\n}\n\nexport default MainHeader;\n```\n## ReactViewLike Integration\n\n`react-view-router` can be used as a plugin for `ReactVueLike`:\n\n```js\nimport vuelike from '@/vuelike';\nimport ReactViewRouter from 'react-view-router';\n\nconst router = new ReactViewRouter({\n basename: '', // app's basename, if the page route is under /app/, then the base value should be \"/app/\"\n mode: 'hash', // route type browser|memory|hash, default:hash\n routes: [] // route configuration array, can also use the router.use method to initialize\n});\n \nvuelike.use(router);\n```\nThis way, `router` can be registered as a plugin for `ReactVueLike`. After registration, the following features will be available:\n\n\n### Component-level Route Events\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass EmployeeManager extends ReactVueLike.Component {\n\n beforeRouteEnter(to, from, next) {\n next();\n }\n\n beforeRouteLeave(to, from, next) {\n next();\n }\n\n beforeRouteResolve(to, from) {\n\n }\n\n afterRouteLeave(to, from) {\n\n }\n\n beforeRouteUpdate(to, from) {\n\n }\n \n render() {\n return (\n
\n
\n );\n }\n}\n\nexport default EmployeeManager;\n```\n\n\n### Injected Objects\n\nIn the `ReactVueLike.Component` component instance, you can get:\n\n- `$router` - the current router management instance\n- `$route` - object, the current route information, equivalent to `router.currentRoute`\n- `$matchedRoute` object, the current matched sub-route information\n- `$routeIndex` number, the index of the current matched sub-route\n\nThe relationship between the three is: `$route.matched[$routeIndex] === $matchedRoute`.\n\nBelow is an example of \"reading tab label information from route metadata and rendering\":\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass EmployeeManager extends ReactVueLike.Component {\n\n static computed = {\n active() {\n const matched = this.$route.query.redirect\n ? this.$router.getMatched(this.$route.query.redirect)\n : this.$route.matched;\n const match = matched[this.$routeIndex + 1];\n return (match && match.subpath) || 'roster';\n },\n tabs() {\n return this.$matchedRoute.config.children\n ? this.$matchedRoute.config.children.filter((r) => r.meta.title && !r.meta.hideTab).map((r) => ({\n key: r.subpath,\n label: r.meta.title,\n badge: Boolean(r.meta.badge)\n }))\n : [];\n },\n }\n\n handleTabChanged(v) {\n const path = `${this.$matchedRoute.path}/${v}`;\n if (this.$route.path === path) return;\n this.$router.replace(path);\n }\n\n render() {\n return (\n
\n \n { this.tabs.map((tab) => )}\n \n
\n );\n }\n}\n\nexport default EmployeeManager;\n```\n### Listen to Route Changes\n\nYou can use the `watch` feature of `ReactVueLike.Component` to listen to route changes and do something.\n\nExample:\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass MainSider extends ReactVueLike.Component {\n\n static watch = {\n $route(newVal, oldVal) {\n if (!newVal || !oldVal) return;\n // When the route changes, update the left menu information\n if (newVal.fullPath !== oldVal.fullPath) this.updateList(newVal);\n },\n }\n\n static methods = {\n updateList(route) {\n ...\n },\n }\n}\n\nexport default MainSider;\n```\n\n## Route Transition Effects\n\nYou can use `import RouterView from 'react-view-router/transition'` to reference `RouterView` that supports route transition effects to add simple transition effects to the page. Currently, three types of effects are supported: `fade|slide|carousel`:\n\n```js\nimport React from 'react';\n// import { RouterView } from 'react-view-router';\nimport RouterView from 'react-view-router/transition';\nimport router from '@/history';\n\nfunction App() {\n return (\n
\n \n
\n );\n}\n\nexport default App;\n```\n\nThe usage is the same as the regular `RouterView`, except that four additional properties are added: `transition`, `transitionPrefix`, `transitionZIndex`, `routerView`:\n```ts\ninterface TransitionRouterViewProps extends RouterViewProps {\n transition?: TransitionName | {\n name: TransitionName,\n zIndex?: number,\n containerStyle?: React.HTMLAttributes,\n containerTag?: string | React.ComponentType | React.ForwardRefExoticComponent\n };\n transitionPrefix?: string;\n transitionZIndex?: number;\n routerView?: RouterViewComponent\n}\n```\n\n- `transition` - The name of the effect, currently supports `slide` and `fade` effects. It can also be an object.\n- `transitionPrefix` - The `className` prefix of the effect, default is `react-view-router-`. If you modify this value, you need to provide the style of the effect by yourself;\n- `transitionZIndex` - The `zIndex` of the entering/leaving page, default is 1000. If the current effect is `slide` and there is an element in the current page with a zIndex greater than 1000, you can avoid the element penetrating the transition page by setting `transitionZIndex` to a higher value.\n\n## Route Handling in Mid-end Modules\n\nIf a mid-end module needs to configure routes, it needs to add its routes to the route address of the host project, and `react-view-router` also supports this mode of development.\n\n1. Configure the route instance to manual mode:\n\n```js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({\n manual: true,\n routes\n});\n\nexport default router;\n```\n\n2. Start route monitoring when the module is initialized/destroyed\n\n```js\nimport router from '@/history';\n\nexport default {\n bootstrap({ basename, routeMode }) {\n ...\n router.start({ basename, routeMode });\n ...\n },\n\n unmount() {\n ...\n router.stop();\n ...\n }\n}\n```\nOr in the component:\n\n```js\nimport React from 'react';\nimport { useManualRouter, RouterView } from 'react-view-router';\nimport router from '@/history';\n\n/** \n * Global route interception event\n * @type {import('react-view-router').RouteBeforeGuardFn} \n **/\nfunction beforeEach(to, from, next) {\n next();\n}\n\nfunction App({ basename, routeMode }) {\n useManualRouter(router, { basename, routeMode });\n\n return
\n \n
\n}\n\nexport default App;\n```\n## NOTE\n\n1. `react-view-router` does not depend on `react-vue-like` and can be used independently.\n\n2. If the route component is a `Class Component` (not a `Function Component`), then the guard functions of the `beforeRouteUpdate`, `beforeRouteLeave`, `afterRouteLeave` components will all be bound to the `this` variable, which points to the current component instance;\n","readmeFilename":"README.md"}