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,自己动态配置路由

加载中

}>                                     {                         this.props.routes.map((item, index) => {                             return (                                 item.from ?                                     :                                     {                                         if (item.children) {                                             return                                         } else {                                             return                                         }                                     }} />                             )                         })                     }                            

引入自己写的路由表RouterView

一级路由

二级路由

四,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') );