精华内容
下载资源
问答
  • VUE跳转页面传值 地址栏显示传值或者不显示地址栏传值
    千次阅读
    2019-07-09 09:32:13

    VUE跳转页面传值 地址栏显示传值或者不显示地址栏传值
    a页面传值到b页面
    params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示

            this.$router.push({
                   path: 'xxx',
                   name:'xxx',
                   params: { id:idParams }
            })
    
            接收参数:this.$route.params.id
    

    query 传参 : 相当于get请求,页面跳转时参数会在地址栏中显示

            this.$router.push({
                   path: 'xxx',
                   name:'xxx',
                   query: { id:idParams }
            })
    
            接收参数:this.$route.query.id 
    

    注意:传参是 router , 接收参数是 route
    query 传参一定要加路由一定要加name属性不然拿不到值

    更多相关内容
  • 路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面...VueRouter的路由传值有种方式 jquery传值。 类似get传值 传值路由 this.$router.push({ path: /login?uname= + this.userName });
  • Vue路由跳转并传值三种方式 1、 <router-link :to="{name:'XXX',query:{id:1,pageSize: 10}}"></router-link> 优劣势:明文传参 URl路径会显示传递的参数 优点:页面刷新参数不会丢失,缺点:参数...

    Vue路由跳转并传值的三种方式

    1、 <router-link :to="{name:'XXX',query:{id:1,pageSize: 10}}"></router-link>

    	优劣势:明文传参  URl路径会显示传递的参数
    	优点:页面刷新参数不会丢失,缺点:参数公开。
    
    		this.$router.push({
    		  name: 'EditDetail',
    		  query: {
    		    id: 1,
    		    pageSize: 10
    		  }
    		})
    

    接收值: this.$route.query.id

    2、<router-link :to="{name:'XXX',params:{id:1,pageSize: 10}}"></router-link>

    优点:浏览器地址栏看不见参数,参数不显示。
    缺点:页面刷新参数会消失。
    
    		this.$router.push({
    		  name: 'EditDetail',
    		  params: {
    		    id: 1,
    		    pageSize: 10
    		  }
    		})
    

    接收值: this.$route.params.id

    3、冒号形式的传参

    		handleClick (id) {
    			this.$router.push({
    				name: 'detail',
    				params: { id: id }
    			})
    		}
    
    展开全文
  • react路由传值三种方式 1.parms 参数 入口携带参数 <Link to="/路由地址/路由参数Params"></Link> <Link to="/home/Tom/18"></Link> 出口获取声明接收参数 <Route path="/home/:name/...

    react路由传值的三种方式

    1.parms 参数

    入口携带参数

    <Link to="/路由地址/路由参数Params"></Link>
    <Link to="/home/Tom/18"></Link>
    

    出口获取声明接收参数

    <Route path="/home/:name/:age" component={Home}>
    

    接收参数(this.props.match.params

    search参数

    入口携带参数

    <Link to="/路由地址?参数名=参数值&参数名=参数值"></Link>
    <Link to="/home?name=Tom&age=18"></Link>
    

    出口获取声明接收参数(无需声明)

    <Route path="/home" component={Home}>
    

    接收参数(this.props.location.search
    获取到的是urlencoded编码字符串,需要借助querystring 解析

    state参数

    入口携带参数

    <Link to={{path:'路径',state:{属性名:属性值}}}></Link>//这时候里面包裹的就是一个对象直接把数据包裹成对象
    <Link to={{path:'/home',state:{name:'Tom',age:18}}}></Link>
    

    出口获取声明接收参数(无需声明)

    <Route path="/home" component={Home}>
    

    接收参数(this.props.location.state
    刷新也可保留参数

    展开全文
  • react-router 路由三种传值方法

    千次阅读 2018-09-28 09:46:46
    react-router 传值方法 本文主要介绍 react-router 的使用方法 当我们需要的使用 router 来传值的时候 1、使用 props.params 传值 官方例子使用React router定义路由时,我们可以给指定一个path,然后指定通配符...

    react-router 传值方法

    • 本文主要介绍 react-router 的使用方法

    当我们需要的使用 router 来传值的时候

    1、使用 props.params 传值

    • 官方例子使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: 首先定义路由到UserPage页面
    import { Router,Route,hashHistory} from 'react-router';
    
    class App extends React.Component {
      render() {
        return (
            <Router history={hashHistory}>
                <Route path='/user/:name' component={UserPage}></Route>
            </Router>
        )
      }
    }
    复制代码
    • 上面指定参数 name
    
    //使用
    import {Link,hashHistory} from 'react-router';
    
    // 1.Link组件实现跳转:
    <Link to="/user/sam">用户</Link>
    
    // 2.history跳转:
    hashHistory.push("/user/sam");
    
    
    // 当页面跳转到UserPage页面之后,取出传过来的值:
    export default class UserPage extends React.Component{
        constructor(props){
            super(props);
        }
        render(){
            return(<div>this.props.params.name</div>)
        }
    }
    复制代码
    • 上面的方法可以传递一个或多个值,但是每个值的类型都是字符串,没法传递一个对象,如果传递的话可以将json对象转换为字符串,然后传递过去,传递过去之后再将json字符串转换为对象将数据取出来 如:定义路由:
    //定义路由
    <Route path='/user/:data' component={UserPage}></Route>
    
    //使用
    var data = {id:3,name:sam,age:36};
    data = JSON.stringify(data);
    var path = `/user/${data}`;
    
    <Link to={path}>用户</Link>
    hashHistory.push(path);
    
    //获取数据
    var data = JSON.parse(this.props.params.data);
    var {id,name,age} = data;
    复制代码

    通过这种方式跳转到UserPage页面时只能通过传递字符串来传递参数,那么是否有其他方法来优雅地直接传递对象而不仅仅是字符串呢?

    2、query

    • query方式使用很简单,类似于表单中的get方法,传递参数为明文:
    
    // 定义路由
    <Route path='/user' component={UserPage}></Route>
    
    
    //这么去使用
    var data = {id:3,name:sam,age:36};
    var path = {
      pathname:'/user',
      query:data,
    }
    <Link to={path}>用户</Link>
    hashHistory.push(path);
    
    //获取数据
    var data = this.props.location.query;
    var {id,name,age} = data;
    复制代码

    query方式可以传递任意类型的值,但是页面的URL也是由query的值拼接的,URL很长,那么有没有办法类似于表单post方式传递数据使得传递的数据不以明文传输呢?

    3、state

    //定义路由
    <Route path='/user' component={UserPage}></Route>
    
    //使用
    var data = {id:3,name:sam,age:36};
    var path = {
      pathname:'/user',
      state:data,
    }
    
    <Link to={path}>用户</Link>
    hashHistory.push(path);
    
    //获取数据:
    var data = this.props.location.state;
    var {id,name,age} = data;
    复制代码

    state方式依然可以传递任意类型的数据,而且可以不以明文方式传输。 可以在实现后对比地址栏的URL来观察三种传值方式URL的区别

    参考

    展开全文
  • 路由跳转及传值取值

    2022-04-16 20:56:56
    一个页面跳转到另一个页面功能,使用路由跳转来实现 一、语法介绍 方法一:< router-link :to=… > 方法二:router.push(…) router.push(…)参数可以是字符串路径,也可以是对象 < router-link :to=
  • VUE页面传值 地址栏显示传值或者不显示 params传值 地址栏不显示(相似post请求参数) 内联代码片。 // 传值 this.$router.push({ params:{要接收的名称: 要传的值} }) // 接收 this.$route.params.要接收的名称. //...
  • vue-router 前端路由路由传值

    千次阅读 2019-04-20 18:22:57
    在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: ...
  • 前端面试:Vue路由之间的传值

    千次阅读 多人点赞 2021-07-31 17:49:15
    字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数: this.$router.push("home"); 对象: 想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别...
  • React Router路由传值三种方法

    千次阅读 2018-10-07 22:04:11
    官方例子使用React router定义路由时,我们可以给&lt;Route&gt;指定一个path,然后指定通配符可以携带参数到指定的path: 首先定义路由到UserPage页面:   import { Router,Route,hashHistory} from '...
  • 1、params传参(刷新页面后参数不消失,参数会在地址栏显示) 2、query传参(刷新页面后参数消失) 3、state传参(刷新页面后参数不消失,state传的参数是加密的)
  • vue路由传值的几方法及区别

    万次阅读 2018-10-23 14:19:16
    vue路由传值 对应的路由配置模块 , { path: '/editCardetail', name: 'editCardetail', component: EditCardetail }, 1、使用$router.push 拼接参数传参 this.$router.push('/editCardetail?editType=add') ...
  • vue-router 传值三种方式

    千次阅读 2021-06-15 21:35:40
    上次被问到路由之间如何传值,我一整个蒙住,但其实在项目中也有用到过,所以今天把这些方法整理出来,以后便于翻阅 1. query 传值 在主页面中写一个按钮,绑定方法 <button @click="sentMesg()">兄弟页面<...
  • 路由路由传值

    2021-07-15 15:46:10
    React Router被拆分成个包:react-router,react-router-dom和react-router-native。 react-router提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。 进行网站(将会运行...
  • 对应的路由配置模块 1、使用router.push拼接参数传参this.router.push 拼接参数传参 this.router.push拼接参数传参this.router.push(’/editCardetail?editType=add’) 2 当点击 时,这个方法会在内部调用,即点击...
  • 添加路由 { path: '/Qyqxhx', ...params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示 this.$router.push({ name:'Qyqxhx', params: { id: pripid } }) 接收参数:this.$route.params.id .
  • 路由传参的方式有

    千次阅读 2022-03-15 08:28:39
    路由传参的方式
  • 在vue项目中我们在路由中需要接触到最多的就是路由之间的传值,在这里主要介绍了vue自带的路由传参的3基本方式。 场景一:单击当前页的按钮跳转到另一个页面,并将数据传到另一个页面。 <div class="btn" @...
  • 一、路由传值: 1、通过路由的路径带参数,同时配置路由的时候也要带上参数,获取参数使用this.$route.params.id,直接拿路由里面的参数。 toRouter(){ var id = 1; this.$router.push({ path:'/content/${...
  • 路由商品跳转详情页,地址栏添加id会出现id不正常显示, 解决了事件没有传id
  • react实现路由跳转传参的方式 三种

    千次阅读 2020-06-30 15:53:53
    1.路由表配置:参数地址栏显示 html:跳转列表页面 Js: this.props.history.push('/list/2'); List页面接收: console.log(this.props.match.params.id)//传递过来的所有参数 2.query方法:参数地址栏不显示,刷新...
  • // 传值 this.$router.push({ name: 'orderList', query: { conlltion: id }}) this.$router.push({path:'/orderList',query: {conlltion: id }}) // html取值 $route.query.conlltion // scr...
  • vue $router路由传值

    2021-11-25 19:55:03
    点击标签传值 <el-table-column fixed="right" label="操作" width="" align="center"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" content="查看详情" placement=...
  • Vue路由跳转传值方法

    2020-08-14 14:42:26
    方法一 传值: <router-link :to="{name:'跳转的路由名称',params:{数值名1:'值内容1',数值名1:'值内容1'}}" ...这个方法传值不会显示在地址栏中 方法二 传值: <router-link :to="{path:'/跳转的路由',query:
  •  我们通过配置基本路由,可以实现页面间的切换,但是如果在一个页面中一列表标题,我们点击各个标题,就能进入到此标题所表示的内容页面中,这该如何实现呢,下面就要用到我们的动态路由了,实际效果如下图所示:...
  • 上一篇我们讲解了vue中的路由以及默认路由跳转,本篇我们来继续学习如何通过类似Get请求传值方式,给路由传递参数。 本系列博文使用的Vue版本:2.6.11 一、动态传参的概念 上一篇我们实现了分别点击“首页”和...
  • 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,...//这个组件对应的路由配置 { //组件路径 path: '/admin', //组件别名 name: 'admin', //组件名 component: Admin, }
  • ${encodeURI(JSON.stringify( {classId: record.classId,className: record.className, courseInfo: this.state.courseInfo}))}`) } //地址栏获取数据 componentDidMount() { const data = this.props.location....
  • React路由传参的三种方式

    千次阅读 2020-06-29 10:32:42
    React路由传参的三种方式 方式 一: 通过params 1.路由表中 <Route path=' /sort/:id ' component={Sort}></Route> 2.Link处 HTML方式 <Link to={ ' /sort/ ' + ' 2 ' } ...
  • vue路由传值

    2019-07-28 22:08:36
    vue中的路由传值主要分为种种方式,携带参数的路由跳转、params传参、query传参。 1.配置路由时直接将参数放在路由后面下面上代码: // 声明路由时直接将参数放上去 { path: '/index/:name/:p...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,883
精华内容 1,153
关键字:

路由地址栏传值有那三种方式