vue 和 react 路由跳转和传参

                 

react 

  1 .跳转方式加传参

this.props.history.push({
      //地址
      pathname: '/film/Details',
      //路由传参--对象
      query: {
        id,
        from: ''
      }
    });

  2.跳转Link

import { Link } from 'react-router-dom';

<Link exact="true" to="/login" className="user">
<i className="icon iconfont icon-geren"></i>
</Link>

  

转载于:https://www.cnblogs.com/gfweb/p/9803796.html

VueReact都是流行的前端框架,它们都有自己的路由系统。下面是VueReact路由的区别和举例: 1. 路由配置方式不同 Vue使用Vue Router来管理路由,它的路由配置是通过路由表来实现的。路由表是一个数组,其中每个对象都代表一个路由。每个路由对象都包含路径、组件等属性。 React使用React Router来管理路由,它的路由配置是通过JSX来实现的。JSX语法可以直接嵌入路由信息,从而实现路由的配置。 下面是VueReact路由配置的示例代码: Vue路由配置: ``` const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) ``` React路由配置: ``` <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ``` 2. 路由跳转方式不同 在Vue中,可以使用`this.$router.push()`方法来进行路由跳转。这个方法会将当前路由推入路由历史栈中,从而实现路由跳转。在React中,可以使用`<Link>`组件或者`history.push()`方法来进行路由跳转。`<Link>`组件会在点击时将路由推入路由历史栈中,而`history.push()`方法则需要手动调用。 下面是VueReact路由跳转的示例代码: Vue路由跳转: ``` // 在组件中调用 this.$router.push('/about') ``` React路由跳转: ``` // 使用Link组件 <Link to="/about">About</Link> // 使用history.push()方法 history.push('/about') ``` 3. 路由参数传递方式不同 在Vue中,可以使用路由参数来传递参数。通过`$route.params`对象可以获取路由参数。在React中,可以使用URL参数来传递参数。通过`props.match.params`对象可以获取URL参数。 下面是VueReact路由参数传递的示例代码: Vue路由参数传递: ``` // 在路由表中定义参数 { path: '/user/:id', component: User } // 在组件中读取参数 this.$route.params.id ``` React路由参数传递: ``` // 在路由表中定义参数 <Route path="/user/:id" component={User} /> // 在组件中读取参数 props.match.params.id ``` 总之,VueReact路由虽然都实现了前端路由功能,但是在路由配置方式、路由跳转方式和路由参数传递方式等方面存在差异。开发者应该根据项目需求和个人喜好选择适合自己的框架。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值