vue和react路由的区别

一,vue2

1,路由用3.x的

2,实例化new VueRouter()

3,获取路由实例及路由信息:用this.$router.push()及this.$route.params

4,路由传参(参数都不丢失):

(1)动态路由: this.$route.params.id(路由表提前配置)

(2)query传参: this.$route.query.id

注:路径用path, react的路径用pathname,如this.$router.push({ path:"admin",params:{id:id}}

5,有路由元meta{},可以配置标题等; 子路由用children; components配置命名视图

二,vue3

1,路由用4.x的

2,实例化createRouter()

3,用useRouter()生成的路由对象实例,useRoute()生成路由信息对象(如router.push('/index/home'))

4,路由传参:同上

5,有路由元meta{},可以配置标题等,子路由用children; components配置命名视图

三,react的类组件

1,路由用v5的react-router-dom

2,路由配置

(1)一级路由写在APP里

(2)嵌套路由: 在子一级页面(如index)设置二级路由规则(有嵌套路由不写exact)

(3)路由组件:Switch, Route(path及component) , Redirect(from和to) , Link, NavLink(active 类)

及路由管理组件:BrowserRouter , HashRouter ,

注:Route组件本身就充当router-view的占位作用

3,路由实例及路由信息:
跳路由this.props.history

获取路由信息this.props.match.params(动态路由配置并传参)

获取路由信息this.props.location.state.id(用state传参)(query同理但是数据刷新丢失)

注: 路由及状态管理都被注入到props的属性中; 不是路由规则的可以用withRouter包裹获取路由方法;路径用pathname

4,自己动态配置路由

<Suspense fallback={<div className='loading' >加载中</div>}>
                <Switch >
                    {
                        this.props.routes.map((item, index) => {
                            return (
                                item.from ?
                                    <Redirect key={index} exact from={item.from} to={item.to} /> :
                                    <Route key={index} path={item.path} render={(props) => {
                                        if (item.children) {
                                            return <item.component {...props} routes={item.children} />
                                        } else {
                                            return <item.component {...props} />
                                        }
                                    }} />
                            )
                        })
                    }
                </Switch>
            </Suspense>

引入自己写的路由表RouterView

一级路由
<RouterView routes={routes} />
二级路由
<RouterView routes={this.props.routes} />

四,react的函数式组件

1,路由用v6的react-router-dom

2,路由配置

(1)所有嵌套路由规则写在APP里(没有exact),嵌套的二级路由在一级路由中用Outlet显示占位

(2)或定义类似于vue的路由规则,使用useRoutes()生成路由表,

(3)路由组件:Routes, Route(path及element套组件) , Navigate(被Route包裹及to) , Link, NavLink(active 类)

及路由管理组件:BrowserRouter , HashRouter ,

注:v6移除了withRouter高阶组件

3,路由实例及路由信息:
跳路由useNavigate(),实例化后直接跳路径; 或NavLink及Link

获取路由信息useLocation()

4,路由传参(参数都不丢失):

(1)动态路由(路由表提前配置):

useParams()获取动态路由参数

var navigate = useNavigate()
navigate('/detail/'+88888)
var params = useParams()

(2)state传参:

useLocation() 获取state参数
(3)查询字符串传参( query传参 ):

useSearchParams() 获取query参数

navigate('/detail?id=99999')
var [searchParams,setSearchParams] = useSearchParams();
console.log( searchParams.get('id') );