精华内容
下载资源
问答
  • vue 路由传参

    2020-01-09 16:47:34
    vue 路由传参 路由传参有3种形式,一种是params传参,一种是query传参,还有一种是字符串拼接 params传参需要和name结合使用,query传参既可以和path结合,也可以和name使用(如果记不住,可以记有2个m搭配结合...

    vue 路由传参

    • 路由传参有3种形式,一种是params传参,一种是query传参,还有一种是字符串拼接

    • params传参需要和name结合使用query传参既可以和path结合,也可以和name使用(如果记不住,可以记有2个m搭配结合使用,其实就是paramsname,剩余的query随意搭配使用)

    • 在浏览器地址的展示情况以及页面刷新参数丢失情况:

    1. params传参类似于post请求,如果配置路由的时候没有设置参数,那么在浏览器地址看不到参数值,页面里可以通过this.$route.params获取到参数数据,刷新页面参数会丢失, 如果配置路由的时候设置了参数在浏览器地址可以看到参数值,页面里可以通过this.$route.params获取到参数数据,刷新页面参数不会丢失
    2. query传参类似于get请求,用“ ?”连接,在浏览器地址可以看到参数名称和参数值,页面里能通过this.$route.query获取到参数数据,刷新页面参数也是存在的
    3. 字符串拼接不会在子路由页面打印出任何参数信息,但是在浏览器地址上会显示参数数值。
    • 以下例子是验证以上所说:
      一、param传参
    1. 配置路由,这种情况路由没有设置参数携带,注意path后面没有配置参数:
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    Vue.use(VueRouter)
    const Test  = () => import('@/components/Test.vue')  // 这里是一个组件Test
    new VueRouter({
        routes: [
    	    {
    	        path: '/test',
    	        component: Test,
    	        name: 'test'  // name是必须有的,且是唯一的,不能重复
    	    }
    	]
    })
    

    params传参,需要结合name使用,因为配置路由的时候没有给路由设置参数,那么路由跳转之后,可以获取到参数,但是刷新页面,参数不存在了:

    // 路由跳转
    this.$router.push ({ name: 'test', params: {
      id: '121212',
      name: 'huahua'
    }})
    
    // 获取参数, 注意这里是$route,指的是当前路由
    console.log(this.$route.params) // 获取params传参所有数据
    // this.$route.params.id // 获取params参数的id数据
    

    在浏览器地址栏的情况如下图,因为没有配置参数,所以参数不会在地址栏上显示:
    在这里插入图片描述
    打印结果如下图:
    在这里插入图片描述

    刷新之后,this.$route.params是一个空对象了,打印结果如下图:
    在这里插入图片描述

    2、配置路由的时候设置参数,这种情况路由设置参数携带,注意path后面有配置参数:

    import VueRouter from 'vue-router'
    import Vue from 'vue'
    Vue.use(VueRouter)
    const Test  = () => import('@/components/Test.vue')  // 这里是一个组件Test
    new VueRouter({
        routes: [
    	    {
    	        path: '/test/:id/:name',
    	        component: Test,
    	        name: 'test' // name是必须有的,且是唯一的,不能重复
    	    }
    	]
    })
    

    params传参,需要结合name使用,因为配置路由的时候给路由设置参数,那么路由跳转之后,可以获取到参数,刷新页面,参数也存在:

    // 路由跳转
    this.$router.push ({ name: 'test', params: {
      id: '121212',
      name: 'huahua'
    }})
    
    // 获取参数, 注意这里是$route,指的是当前路由
    console.log(this.$route.params) // 获取params传参所有数据
    // this.$route.params.id // 获取params参数的id数据
    

    在浏览器地址栏的情况如下图,因为配置路由的时候配置参数,所以参数值在地址栏上显示:
    在这里插入图片描述
    打印结果如下图,this.$route.params是有数据的:
    在这里插入图片描述

    刷新之后,this.$route.params是有数据的,打印结果如下图:
    在这里插入图片描述

    二、query传参
    query传参,既可以结合path使用,也可以结合name使用,这里举例子是query结合path使用,结合name使用也亲测好使的,那么路由跳转之后,能获取参数数据,刷新页面,参数也是存在了:

    // 路由跳转,query结合path使用
    this.$router.push ({ path: '/test', query: {
      id: '121212',
      name: 'huahua'
    }})
    // 路由跳转,query结合name使用
    // this.$router.push ({ name: 'test', query: {
    //  id: '121212',
    //  name: 'huahua'
    // }})
    
    // 获取参数, 注意这里是$route,指的是当前路由
    console.log(this.$route.query) // 获取params传参所有数据
    

    在浏览器地址栏的情况如下图:
    在这里插入图片描述
    打印结果如下图,是有数据的:
    在这里插入图片描述
    刷新页面,数据也是存在的:
    在这里插入图片描述

    三、字符串拼接

    let id = '121212'
    let name = 'huahua'
     this.$router.push ({path: `/test/${id}/${name}`})  // 使用es6的字符串模板拼接
    

    无论配置路由的时候是否配置参数,子路由页面里没有打印出任何信息,但是浏览器地址栏会把参数值显示出来,结果如下:
    在这里插入图片描述

    展开全文
  • Vue路由传参

    2020-12-30 23:27:35
    Vue路由传参 1.路由中使用 “?”拼接 (route,query) 跳转前的页面:跳转页面路由进行?拼接所要向跳转页面的参数。 跳转后的页面: 使用$route的query中接收上层页面传来的路由参数, 2.this.$router.params....

    Vue路由传参
    1.路由中使用 “?”拼接 (route,query中查看)
    跳转前的页面:跳转页面路由进行?拼接所要向跳转页面的参数。
    在这里插入图片描述
    跳转后的页面:
    使用$route的query中接收上层页面传来的路由参数,
    在这里插入图片描述

    2.this.$router.params.参数名称

    展开全文
  • vue路由传参

    2020-04-16 17:24:02
    vue路由传参方式有很多种,在这里就用query的方式,我觉得这种比较方便好记 1、js中 里面的name一定要和你router路由中的名字对应起来 toDetail(item){ console.log(item) this.$router.push({ name:'...

    vue路由传参方式有很多种,在这里就用query的方式,我觉得这种比较方便好记

    1、js中
    里面的name一定要和你router路由中的名字对应起来

    	toDetail(item){
          console.log(item)
          this.$router.push({
            name:'classifyDetail',
            query:{
              class_fid:item.fid
            }
          })
        },
    

    在这里插入图片描述
    在这我们能打印到item,就说明可以获取到
    在这里插入图片描述
    2、在页面接收
    接收的时候不要写错了,是***$route***,没有r

    	created () {
           this.classifyId = this.$route.query.class_fid
           console.log(this.$route.query)
           this.classifyInfo()
        },
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    参考文章:

    (1)vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    (2)https://www.cnblogs.com/dengyao-blogs/p/11399676.html


    备忘一下。


    展开全文
  • VUE路由传参

    2017-12-23 18:14:00
    vue路由传参的两种方式 方式一: 页面引入 路由配置 显示 方式二: 页面引用 路由配置 显示 转载于:https://www.cnblogs.com/zhou195/p/8094064.html...
  • Vue 路由传参

    2021-01-12 10:28:37
    路由传参三种方式 需求:获取传递参数 <router-link to="/login/11314555">路由传参</router-link> <button @click="loginById('11314555')">路由传参</button> 方式一 路由配置: { ...
  • VUE 路由传参

    2019-12-09 17:08:50
    vue路由带参总结 1. params <router-link :to="{name:'test', params: {id:1}}"> 配置路由格式要求: path: "/test/:id" js参数获取:this.$route.params.id 2.query <router-link :to="{name:'test', ...
  • 13 路由传参1.方案一// 路由定义{path: '/describe/:id',name: 'Describe',component: Describe}// 页面传参this.$router.push({path: /describe/${id},})// 页面获取this.$route.params.id2.方案二// 路由定义{path...

空空如也

空空如也

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

vue路由传参

vue 订阅