mettleRouter

TIP

For a better reading experience, the following code examples are written using JSX syntax.

mettleRouter is the official routing manager of Mettle. It is deeply integrated with Mettle’s core to easily build single-page applications.

Started

We can start learning based on the following steps.

1. Create home page

// home.jsx
import { defineComponent } from 'mettle';
import { linkTo } from 'mettle-router';
import logo from '../assets/logo.png';

const home = () =>
  defineComponent(({ setData }) => {
    const state = {
      msg: 'hello',
      arr: [1, 2],
      count: 3,
    };

    function goAbout() {
      linkTo({
        path: '/about',
        query: {
          id: 1,
          name: 'maomin',
        },
      });
    }

    function useChange() {
      setData(() => {
        state.msg = 'world';
        state.count++;
        state.arr.unshift(state.count);
      });
    }

    return () => (
      <fragment>
        <button onClick={goAbout}>goAbout</button>
        <h1>Home</h1>
        <div class='logo-inner'>
          <img src={logo} class='logo' />
        </div>
        <p onClick={useChange}>{state.msg}</p>
        <ul>
          {state.arr.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </fragment>
    );
  });

export default home;

2. Create about page

// about.jsx
import { defineComponent } from 'mettle';
import { linkTo, toParse } from 'mettle-router';

const about = () =>
  defineComponent(() => {
    function goHome() {
      linkTo({
        path: '/',
      });
    }

    function getOption() {
      console.log(toParse());
    }

    return () => (
      <fragment>
        <button onClick={goHome}>goHome</button>
        <h1 onClick={getOption}>About</h1>
      </fragment>
    );
  });

export default about;

3. Configure routing information

// router/index.js
import { resetView } from 'mettle';
import { initRouter } from 'mettle-router';

import home from '../template/home';
import about from '../template/about';

const router = initRouter(
  [
    {
      path: '/',
      template: home,
    },
    {
      path: '/about',
      template: about,
    },
  ],
  resetView
);

export default router;

4. Mount page

// main.js
import { defineComponent } from 'mettle';
import router from './router/index';
import './styles/app.css';

defineComponent(
  {
    mount: '#app',
  },
  () => {
    return () => <component $is={router.view()}></component>;
  }
);

Install

npm install mettle-router

Usage

You can use createMettleApp and choose the mettle-apps or mettle-jsx-apps template.

API

initRouter()

The first parameter is an array object, which is the routing component that needs to be registered. The path attribute represents the path of the component, and the template attribute is the imported component.

The second parameter needs to be passed to the resetView API, and the page matching the corresponding path will be updated accordingly. For example, create an index.js file in the router folder here.

// router/index.js
import { resetView } from 'mettle';
import { initRouter } from 'mettle-router';

import home from '../template/home';
import about from '../template/about';

const router = initRouter(
  [
    {
      path: '/',
      template: home,
    },
    {
      path: '/about',
      template: about,
    },
  ],
  resetView
);

export default router;

Components matching the route will be rendered to where the view() method is located, usually placed under the main page entry file (such as main.js).

// main.js
import { defineComponent } from 'mettle';
import router from './router/index';
import './styles/app.css';

defineComponent(
  {
    mount: '#app',
  },
  () => {
    return () => <component $is={router.view()}></component>;
  }
);

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 pass the path string directly.

import { defineComponent } from 'mettle';
import { linkTo } from 'mettle-router';

const about = () =>
  defineComponent(() => {
    function goHome() {
      linkTo({
        path: '/',
      });
    }

    return () => (
      <fragment>
        <button onClick={goHome}>goHome</button>
      </fragment>
    );
  });

export default about;

forward()

Skip forward 1 page.

back()

Jump back 1 page.

go(n)

Jump n pages within the page.

toParse

If you perform the operation of routing parameters, you need to obtain the parameter object. Directly executing the toParse() method can obtain object information.

import { defineComponent } from 'mettle';
import { linkTo, toParse } from 'mettle-router';

const about = () =>
  defineComponent(() => {
    function goHome() {
      linkTo({
        path: '/',
      });
    }

    function getOption() {
      console.log(toParse());
    }

    return () => (
      <fragment>
        <button onClick={goHome}>goHome</button>
        <h1 onClick={getOption}>About</h1>
      </fragment>
    );
  });

export default about;

routerVersion

You can get the version information of mettleRouter.