init

Author: maomincoding

doc/en/changeLog/index.md

@@ -1,6 +1,10 @@
 # Change Log
 
-## v1.7.0 (Latest)
+## v1.7.1 (Latest)
+
+- Enhanced integration with [mettleRouter](/tool/mettleRouter/).
+
+## v1.7.0
 
 - Introducing the `Signals` mechanism, which automatically updates components and the UI when state changes, ensuring the most efficient operation possible.
 

doc/en/essentials/api/index.md

@@ -232,6 +232,10 @@ function App() {
 }
 ```
 
+## resetView
+
+Integrate [mettleRouter](/tool/mettleRouter/) to reset the current routing view.
+
 ## html
 
 ` html`` ` is a tag function. The syntax for a tag function is to directly follow the function name with a template string. For example, you can write HTML tags directly in the template string.

doc/en/tool/mettleRouter/index.md

@@ -20,6 +20,8 @@ The first parameter is an array object, which is the routing component to be reg
 
 The second parameter needs to be passed to the `resetView` API, and the page matching the corresponding path will be updated accordingly.
 
+The first two parameters must be passed, and the third parameter is optional and is used to configure the selector of the root node of the routing page.
+
 ```js
 // router/index.js
 import { resetView } from 'mettle';
@@ -39,7 +41,8 @@ const router = initRouter(
       template: About,
     },
   ],
-  resetView
+  resetView,
+  '#router',
 );
 
 export default router;
@@ -59,6 +62,23 @@ function App() {
 createApp(<App />, '#app');
 ```
 
+If you configure the third parameter, the `<Router>` component must set a parent node.
+
+```jsx
+// main.jsx
+import { createApp } from 'mettle';
+import Router from './router/index';
+
+function App() {
+  return (
+    <div id='router'>
+      <Router></Router>
+    </div>
+  );
+}
+createApp(<App />, '#app');
+```
+
 ### linkTo()
 
 If you need to jump to the corresponding page, use the `linkTo()` method, you can pass the corresponding path and parameters to be passed, or you can directly pass the path string.
@@ -90,6 +110,40 @@ function About() {
 
 If you perform a route parameter operation, you need to obtain the parameter object. You can directly execute the `toParse()` method to obtain the object information.
 
+```jsx
+console.log(toParse());
+```
+
+### hashChange
+
+When the route changes, the `hashChange` event is triggered. You can listen to this event and perform custom actions.
+
+```jsx
+import { hashChange } from 'mettle-router';
+
+hashChange(() => {
+  if (location.hash === '#/login') {
+    isLogin.value = true;
+  } else {
+    isLogin.value = false;
+  }
+});
+```
+
+Returns the function to cancel listening.
+
+```jsx
+const removeListener = hashchange(() => {
+  console.log('Hash变化:', location.hash);
+});
+
+// removeListener();
+```
+
 ### routerVersion
 
 You can get the version information of `mettleRouter`.
+
+```
+
+```

doc/zh/changeLog/index.md

@@ -1,6 +1,10 @@
 # 更新日志
 
-## v1.7.0 (Latest)
+## v1.7.1 (Latest)
+
+- 增强与[mettleRouter](/zh/tool/mettleRouter/)的集成。
+
+## v1.7.0
 
 - 引入 `Signals` 机制，状态变化会自动更新组件和 UI，以实现尽可能高效的操作。
 

doc/zh/essentials/api/index.md

@@ -232,6 +232,10 @@ function App() {
 }
 ```
 
+## resetView
+
+集成[mettleRouter](/zh/tool/mettleRouter/)，用于重置当前路由视图。
+
 ## html
 
 ` html`` `是一个标签函数，标签函数的语法是直接在函数名后跟一个模板字符串。 例如，您可以直接在模板字符串中编写 HTML 标签。

doc/zh/tool/mettleRouter/index.md

@@ -20,6 +20,8 @@ npm install mettle-router
 
 第二个参数需要传递给`resetView` API，匹配到对应路径的页面会相应更新。
 
+前两个参数是必须要传的，第三个参数是可选的，用于配置路由页面根节点的选择器。
+
 ```js
 // router/index.js
 import { resetView } from 'mettle';
@@ -39,7 +41,8 @@ const router = initRouter(
       template: About,
     },
   ],
-  resetView
+  resetView,
+  '#router',
 );
 
 export default router;
@@ -59,6 +62,23 @@ function App() {
 createApp(<App />, '#app');
 ```
 
+如果你配置了第三个参数，那么`<Router>`组件必须设置一个父节点。
+
+```jsx
+// main.jsx
+import { createApp } from 'mettle';
+import Router from './router/index';
+
+function App() {
+  return (
+    <div id='router'>
+      <Router></Router>
+    </div>
+  );
+}
+createApp(<App />, '#app');
+```
+
 ### linkTo()
 
 如果需要跳转到对应的页面，使用`linkTo()`方法，可以传递对应的路径和要传递的参数，也可以直接传递路径字符串。
@@ -90,6 +110,36 @@ function About() {
 
 如果执行路由参数的操作，则要获取参数对象。 直接执行`toParse()`方法可以获取对象信息。
 
+```jsx
+console.log(toParse());
+```
+
+### hashChange
+
+当路由发生变化时，会触发`hashChange`事件。 您可以监听该事件，执行自定义操作。
+
+```jsx
+import { hashChange } from 'mettle-router';
+
+hashChange(() => {
+  if (location.hash === '#/login') {
+    isLogin.value = true;
+  } else {
+    isLogin.value = false;
+  }
+});
+```
+
+返回取消监听的函数。
+
+```jsx
+const removeListener = hashchange(() => {
+  console.log('Hash变化:', location.hash);
+});
+
+// removeListener();
+```
+
 ### routerVersion
 
 可以获取 `mettleRouter` 的版本信息。