精华内容
下载资源
问答
  • 这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...
  • vue项目中我们在路由中需要接触到最多的就是路由之间的传值,在这里主要介绍了vue自带的路由传参的3基本方式。 场景一:单击当前页的按钮跳转到另一个页面,并将数据传到另一个页面。 <div class="btn" @...

    vue中路由传参的三种基本方式

    在vue项目中我们在路由中需要接触到最多的就是路由之间的传值,在这里主要介绍了vue自带的路由传参的3种基本方式。

    场景一:单击当前页的按钮跳转到另一个页面,并将数据传到另一个页面。

    <div class="btn" @click="jump(1)">跳转携值</div>
    

    方法1:页面刷新数据不会丢失

    methods:{
    	jump(id){
    		this.$router.push({
    			path:"/article/"+id
    		})
    	}
    }
    

    路由配置如下:

    {
    	path: '/article/:id', // /:id 对应携带的参数,子组件即可获取传递的参数值。获取方式:this.$route.params.id
    	name: 'article',
    	component: () => import('...')
    }
    

    方法2:页面刷新数据会丢失

    methods:{
    	jump(id){
    		// 通过路由属性中的name来确定匹配的路由,使用params传递参数
    		this.$router.push({
    			name: 'article',
    			params:{
    				id
    			}
    		})
    	}
    }
    

    路由配置如下:

    {
    	path:'/article',
    	name: 'article',
    	component: ()=>import('...')
    }
    // 子组件获取参数 this.$route.params.id
    

    方法3:使用path来匹配路由,通过query来传递参数。这种情况下query传递的参数会显示在地址栏中url?id=‘传值’。

    methods:{
    	jump(id){
    		this.$router.push({
    			path: '/article',
    			query:{
    				id
    			}
    		})
    	}
    }
    

    对应路由配置如下:

    {
    	path:'/article',
    	name: 'article',
    	component:()=>import('...')
    }
    // 子组件获取参数 this.$route.query.id
    

    特别注意

    route与router的区别。route表示路由属性;router表示路由实例。

    以上3种是路由传参的基本方式。除了以上几种还可以使用sessionStorage/localStorage/cookie进行存储也可以进行存储也可以,使用VUEX也行,具体因场景而异。

    展开全文
  • 传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参三种方式方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • 【vue】vue路由传参三种方式

    千次阅读 2018-10-22 10:30:13
    传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参三种方式方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...

    前言

    vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

    方式一:params 传参(显示参数)

    params 传参(显示参数)又可分为 声明式 和 编程式 两种方式

    1、声明式 router-link

    该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:

    //子路由配置
    {
      path: '/child/:id',
      component: Child
    }
    //父路由组件
    <router-link :to="/child/123">进入Child路由</router-link>
    

    2、编程式 this.$router.push

    使用该方式传值的时候,同样需要子路由提前配置好参数,例如:

    //子路由配置
    {
      path: '/child/:id',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        path:'/child/${id}',
    })
    

    在子路由中可以通过下面代码来获取传递的参数值

    this.$route.params.id
    

    方式二:params 传参(不显示参数)

    params 传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 name 进行传值的

    1、声明式 router-link

    该方式也是通过 router-link 组件的 to 属性实现,例如:

    <router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>
    

    2、编程式 this.$router.push

    使用该方式传值的时候,同样需要子路由提前配置好参数,不过不能再使用 :/id 来传递参数了,因为父路由中,已经使用 params 来携带参数了,例如:

    //子路由配置
    {
      path: '/child,
      name: 'Child',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        name:'Child',
        params:{
        	id:123
        }
    })
    

    在子路由中可以通过下面代码来获取传递的参数值

    this.$route.params.id
    

    注意:上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

    方式三:query 传参(显示参数)

    query 传参(显示参数)也可分为 声明式 和 编程式 两种方式

    1、声明式 router-link

    该方式也是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名(name 属性),例如:

    //子路由配置
    {
      path: '/child,
      name: 'Child',
      component: Child
    }
    //父路由组件
    <router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>
    

    2、编程式 this.$router.push

    使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性),例如:

    //子路由配置
    {
      path: '/child,
      name: 'Child',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        name:'Child',
        params:{
        	id:123
        }
    })
    

    在子路由中可以通过下面代码来获取传递的参数值

    this.$route.query.id
    
    展开全文
  • vue路由传参三种基本方式

    千次阅读 2019-07-07 09:35:36
    方案: 父组件:使用path来匹配路由,然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=? this.$router.push({ path: '/describe', query: { id: id } }) 对应路由配置...
    <li v-for="article in articles" @click="getDescribe(article.id)">

    方案一:

          getDescribe(id) {
    //   直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/describe/${id}`,
            })

    方案一,需要对应路由配置如下:

       {
         path: '/describe/:id',
         name: 'Describe',
         component: Describe
       }

    很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

    this.$route.params.id

    方案二:

    父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

           this.$router.push({
              name: 'Describe',
              params: {
                id: id
              }
            })

    对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

       {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

    子组件中: 这样来获取参数

    this.$route.params.id

     

    方案三:

    父组件:使用path来匹配路由,然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=?

        this.$router.push({
              path: '/describe',
              query: {
                id: id
              }
            })

    对应路由配置:

       {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

    对应子组件: 这样来获取参数

    this.$route.query.id
    展开全文
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

    方法一:params传参:

    this.$router.push({
            name:"admin",
        //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取)
            params:{id:item.id}
    })       
    
    //这个组件对应的路由配置
    {
      //组件路径
        path: '/admin',
      //组件别名
        name: 'admin',
      //组件名
        component: Admin,
    }
    

    通过params传递参数,如果我们想获取id的 参数值,我们可以通过this. r o u t e . p a r a m s . i d 这 种 方 式 来 打 印 出 来 就 可 以 得 到 了 ; ( 注 意 : 获 取 参 数 的 时 候 是 route.params.id这种方式来打印出来就可以得到了;(注意:获取参数的时候是 route.params.idroute,跳转和传参的时候是$router)

    方法二:路由属性配置传参:

    this.$router.push({
            name:"/admin/${item.id}",
    })       
    
    //这个组件对应的路由配置
    {
      //组件路径
        path: '/admin:id',
      //组件别名
        name: 'admin',
      //组件名
        component: Admin,
    }
    

    通过路由属性配置传参我们可以用this. r o u t e . p a r a m s . i d 来 获 取 到 i d 的 值 , 注 意 t h i s . route.params.id来获取到id的值,注意this. route.params.ididthis.router.push方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应;

    以上两种传参方式基本上可以理解为ajax中的post请求方式,参数都是不可见的,但是上面两种方法都有一个弊端,就是当页面刷新了是获取不到参数值的,那么有没有一种方法是页面刷新之后参数依然存在呢?

    方法三:query传参

    this.$router.push({
            name:"/admin",
         query:{id:item.id}
    })       
    
    //这个组件对应的路由配置
    {
      //组件路径
        path: '/admin',
      //组件别名
        name: 'admin',
      //组件名
        component: Admin,
    }
    

    第三种方式是用query来传参,这种方式是可以解决页面刷新参数消失问题的,这种方式可以理解为是ajax中的get方法,参数是直接在url后面添加的,参数是可见的,所以解决页面刷新参数消失问题建议使用方法三来解决;

    其实解决页面刷新参数丢失问题的方案还有很多,比如把参数存在sessionStorange或者localStorange中都是可行的,不过我们既然用vue框架,就要用vue的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    展开全文
  • 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //...
  • 详解vue路由传参三种方式

    千次阅读 多人点赞 2020-03-27 19:46:25
    在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般...下面我就来说说vue路由传参三种方式: 方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path...
  • 主要为大家详细介绍了vue路由传参的3基本模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue路由传参 一、router-link路由导航 父组件:使用<router-link to = "/跳转路径/传入的参数"></router-link> 子组件:this.$route.params.num接收父组件传递过来的参数 mounted () { this.num = ...
  • vue路由传参到底有几种方式

    千次阅读 多人点赞 2020-08-24 11:46:00
    看了很多篇博客,路由传参说有几种方式的都有,看得我都晕了,都不知道到底有几了,因为很多博客分析的角度不同,所以把我搞得有点乱,最后还是通过实践来搞清楚了,其实本身就是那么几形式,但方式其实就两...
  • Vue路由传参的几种方式

    万次阅读 多人点赞 2018-07-28 23:52:40
    前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 ...
  • vue路由传参种方式

    2020-12-18 22:07:05
    vue路由传参一、router-link路由导航父组件: 使用例如:routerlink传参子组件: this.$route.params.num接收父组件传递过来的参数mounted () {this.num = this.$route.params.num}路由配置::{path: '/a/:num', name:...
  • vue路由传参三种方式以及页面刷新参数丢失问题一、路由传参的三种方式1、传参方式一:params传参2、传参方式二:路由属性配置传参3、传参方式三:query传参二、三种传递方式的区别 一、路由传参的三种方式 1、传参...
  • 记录这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题。场景如下:我需要携带参数id跳转到考试页面,在考试页面接收id,但是当考试页面刷新后,参数id就丢失了。(当时我是通过params传参的) 传参...
  • 在实现Vue多界面应用中,我们经常需要在页面跳转时讲数值传递到另一个页面,那么下面就来介绍下实现路由传参三种方法。 一、Path后加参数 传递方法(id为参数) this.$router.push({ path: '/result/${id}' ...
  • 2、url展示上:params类似于post,query更加类似于我们ajax中学的get传参,说得简单一点,用params传参在浏览器地址栏中不显示参数,用query传参的话浏览器地址栏中会显示参数,所以用params传值相对安全 ...
  • Vue路由传参种方式

    千次阅读 2018-05-20 01:13:01
    vue-router路由中,传参方式一般分两:利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:路由请求发起(编程式导航):this.$router.push({path:'/selectById', ...
  • 下面我来说下vue自带的路由传参三种基本方式 先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去 <div class="examine" @click="insurance(2)">查看详情</div> 第一方法 :...
  • vue路由传参的几种方式

    千次阅读 多人点赞 2020-06-09 14:36:01
    1、 this.$router.push进行编程式路由跳转 2、 router-link 进行页面按钮式路由跳转 3、 this.$route.params获取路由传递参数 4、this.$route.query获取路由传递参数 5、 params 和 query 都是传递参数的,...
  • 路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。 使用 props 将组件和路由解耦: 布尔模式 商品展示界面传递id的动态参数 <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,934
精华内容 5,973
关键字:

vue路由传参的三种方式

vue 订阅
友情链接: ygwin3.rar