一朝react-router 换 Vue Router 的迁移日记

2023-09-29 01:44:42

缘起

前几天看到了一篇Vue转React不完全指北的文章，感觉很有意思。我突然想到自己之前也用过taro+react+ts，而现在恰好公司里也在用vue+ts。因此，本文诞生了。虽然Vue与React都属于前端框架，但它们也有很大的区别。

React-router 到 Vue Router 的迁移

路由配置

React-router中的路由配置是通过在App.js中定义路由来完成的，而Vue Router中的路由配置则是在main.js中进行。

React-router中一个基本的路由配置如下：

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

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

而Vue Router中的一个基本的路由配置如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});

export default router;

导航守卫

React-router中的导航守卫是通过在路由配置中使用RouteGuard组件来实现的，而Vue Router中的导航守卫则是在路由配置中使用beforeEnter钩子函数来实现。

React-router中一个基本的导航守卫如下：

const RouteGuard = ({ children }) => {
  const isLoggedIn = localStorage.getItem("isLoggedIn");
  if (isLoggedIn) {
    return children;
  } else {
    return <Redirect to="/login" />;
  }
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/protected" element={<ProtectedRoute />} />
      </Routes>
    </BrowserRouter>
  );
};

const ProtectedRoute = () => {
  return (
    <RouteGuard>
      <div>Protected content</div>
    </RouteGuard>
  );
};

而Vue Router中的一个基本的导航守卫如下：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/protected",
      component: ProtectedRoute,
      beforeEnter: (to, from, next) => {
        const isLoggedIn = localStorage.getItem("isLoggedIn");
        if (isLoggedIn) {
          next();
        } else {
          next("/login");
        }
      },
    },
  ],
});

传递参数

React-router中可以通过在路由配置中使用useParams()钩子函数来传递参数，而Vue Router中可以通过在路由配置中使用props选项来传递参数。

React-router中一个基本的传递参数示例如下：

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
};

const User = () => {
  const { id } = useParams();
  return <div>User: {id}</div>;
};

而Vue Router中的一个基本的传递参数示例如下：

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