Vue 路由引入和传参

Posted 2023-04-23

参考技术A 5、路由的使用，在components文件夹中的创建Helloworld.vue文件

以上步骤就可实现基本的路由导向了，下面是路由的二种传参形式

首先我们在新建立一个路由的时候，在router文件夹下的index.js文件中

在这里我们假设，我们是从login.vue中跳转到test.vue中，这个时候，我们就需要在login.vue文件中这样跳转

react路由的跳转和传参

1、路由的跳转

一、DOM跳转

在需要跳转的页面导入import {Link} from ‘react-router-dom‘，在需要跳转的地方使用link标签的to属性进行跳转，路由配置文件中导出的那个类名相当于相当于router-view标签，在需要展示的地方引入这个类金星秀展示

1、在路由配置文件中配置路由

 

 

 

2、在需要跳转的页面引入  import {Link} from ‘react-router-dom‘

3、使用link标签进行跳转

 

 

 

4、在需要展示的区域进行展示

 

 

 

 

二、js跳转

使用this.props.history.push(‘/child02‘)

 

当点击事件触发时，调用函数，在函数中用js代码实现跳转

2、路由的传参

一、params传参

1、在路由配置中以/：的方式评接参数标识

 

 

2、在路径后面将参数评接上(/参数)

 

 

3、在被跳转页使用this.props.match.params.xxx(此处为id)    接收参数

 

 

二、query传参

 

 

1、在router文件中配置为正常配置   <Route path="/Child03" component={Child03}/>

2、在跳转时  路径为一个对象{}     其中 pathname为路径  query为一个对象  对象里是携带的参数

3、使用this.props.location.query接收参数

三、state传参

使用this.props.location.state接收参数

 

 

 

链接：https://www.jianshu.com/p/7ad7ab2745af
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。