reactRouter6 vue写法

React 6 是 React 官方提供的一款路由管理库，而 Vue 通常使用 Vue Router 进行路由管理。下面分别介绍 React Router 6 和 Vue Router 的使用方法。

React Router 6:

React Router 6 的使用方法有所改变，不再需要使用 `Route` 和 `Switch` 组件，而是使用 `Routes` 和 `Route` 组件来定义路由。下面是一个简单的例子：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

其中，`Routes` 组件包含多个 `Route` 组件，每个 `Route` 组件用于定义一个路由。`path` 属性用于指定该路由的路径，`element` 属性用于指定该路由所对应的组件。

Vue Router:

Vue Router 是 Vue 官方提供的路由管理库，使用方法与 React Router 6 有所不同。下面是一个简单的例子：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/:catchAll(.*)', component: NotFound },
  ],
});

其中，`createRouter` 用于创建路由实例，`createWebHistory` 用于创建浏览器历史记录模式的路由。`routes` 数组用于定义多个路由，每个路由使用 `path` 属性指定路径，使用 `component` 属性指定对应的组件。

需要注意的是，Vue Router 6 中的路由参数不再使用 `$route.params`，而是使用 `props` 属性。例如：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: UserProfile,
      props: (route) => ({ id: Number(route.params.id) }),
    },
  ],
});

在上面的例子中，当路由匹配到 `/user/123` 路径时，会将 `id` 参数传递给 `UserProfile` 组件，组件可以使用 `props` 接收该参数。