vue-router 和 react-dom-router对比

router对象类型

vue 把 VueRouter作为一个对象,而React 把router作为一个组件。

html5 history api模式和hash模式

vue

vue router实例作为vue instance实例的一个属性,可以配置vue router实例的mode'hash' 或者 'history'

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

react

react-router-domBrowserRouter,HashRouter 分为两个组件。

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

使用方式上的不同

React

React 路由相关组件,作为组件要保持合理的嵌套结构。
BrowserRouter>Switch>Route
BrowserRouter>Link

注意:本例中我将 Route配置保存在一个数组中。

export default function App() {
  return (
    <div id="router-wrapper">
      <BrowserRouter>
        <Switch>
          {routes.map((route,index) => <Route key={index} exact path={route.path} component={route.component} />)}
        </Switch>
        <BottomNav routes={routes} />
      </BrowserRouter>

    </div>

  );
}

vue

vue router实例作为vue instance的配置项则不必在组件上要求嵌套结构。

router-link,router-view 自由摆放即可。

routes 作为数组传递给VueRouter的配置选项即可。


const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({
  mode: 'history',
  routes: routes
})

const app = new Vue({
  router
}).$mount('#app')
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

获取参数的方式不同

https://router.vuejs.org/api/#route-object-properties

React

useHistory
useLocation
useParams
useRouteMatch

import {
  useParams
} from "react-router-dom";
....
let { id } = useParams();

vue

...
this.$router
this.$route.params
...

route-object-properties
Router Instance Methods