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-dom 把BrowserRouter,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>
获取参数的方式不同
React
useHistory
useLocation
useParams
useRouteMatch
import {
useParams
} from "react-router-dom";
....
let { id } = useParams();
vue
...
this.$router
this.$route.params
...
