精华内容
下载资源
问答
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数...
  • 本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 ...
  • vue路由传参

    2020-09-15 17:17:21
    路由传参有两种形式,params,和query。 路由 { path: '/lycc', name: 'lycc', component: lycc, children:[ { path: '/lycc1/:tid', name: 'lycc1', component: lycc1 }, { path: '/lycc2', name:...

    路由传参有两种形式,params,和query。

    以下为了使用router-view,使用的是嵌套父子路由,不使用嵌套路由传参方式一样。

    路由

    {
        path: '/lycc',
        name: 'lycc',
        component: lycc,
        children:[
          {
            path: '/lycc1/:tid',
            name: 'lycc1',
            component: lycc1
          },
          {
            path: '/lycc2',
            name: 'lycc2',
            component: lycc2
          },
          {
            path: '/lycc3',
            name: 'lycc3',
            component: lycc3
          },
          {
            path: '/lycc4',
            name: 'lycc4',
            component: lycc4
          }
        ]
      }

    父路由

    <template> <div><h1>路由传参</h1>
            <!-- http://localhost:8080/#/lycc1/123 -->
            <router-link to="/lycc1/123">路由传参params1</router-link><br/>
            <!-- http://localhost:8080/#/lycc2 -->
            <router-link :to="{name:'lycc2',params:{tid:123}}">(路由传参params2,地址栏不显示,刷新页面值会丢失)</router-link><br/>
            <!-- http://localhost:8080/#/lycc3?tid=123 -->
            <router-link :to="{path:'/lycc3',query:{tid:123}}">路由传参query1</router-link> <br/>
            <!-- http://localhost:8080/#/lycc4?tid=123 -->
            <router-link :to="{path:'/lycc4?tid=123',query:{}}">路由传参query2</router-link> <br/>
            ------------------------------------------------------------------------------------------<br/>
            <!-- http://localhost:8080/#/lycc1/123 -->
            <button @click = "params1('123')" >params传值1</button><br/>
            <!-- http://localhost:8080/#/lycc2 -->
             <button @click = "params2('123')">(params传值2,地址栏不显示,刷新页面值会丢失)</button><br/>
             <!-- http://localhost:8080/#/lycc3?tid=123 -->
             <button @click = "query1('123')" >query传值1</button><br/>
              <!-- http://localhost:8080/#/lycc4?tid=123 -->
             <button @click = "query2('123')" >query传值2</button><br/>
            <router-view></router-view>    </div>
    </template>
    <script>
      export default {
        methods:{
           params1(data){
                this.$router.push({
                path: "/lycc1/" + data
                });
           },
           params2(data){//地址栏不显示,刷新页面值会丢失
                this.$router.push({
                    name: "lycc2",
                    params: {
                        tid: data
                    }
                });
           },
           query1(data){
                this.$router.push({
                    path: "/lycc3?tid=" + data
                });
           },
           query2(data){
                this.$router.push({
                    path: "/lycc4",
                    query: {
                        tid: data
                    }
                });
           }}}
    </script>

    子路由哦接收

    Params接收使用:  {{this.$route.params.参数}}        

    Query 接收使用: {{this.$route.query.参数}}

    展开全文
  • 主要为大家详细介绍了vue路由传参的3种基本模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue传参大致分为路由传参(?拼接传参)和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // ...

    vue传参大致分为路由传参(?拼接传参)和动态路由传参

    一、动态路由传参

    定义路由

    const routes = [
      {
        path: '/first',
        name:'first',
        component:()=>import( '../components/first.vue' )
        // component:first
      },
      {
          path: '/second',
          name:'second',
        component:()=>import( '../components/second.vue' )
      },
    ]

    router-link to 以对象形式跳转

    <template>
      <div id="app">
        <router-link :to="{name:'first',params:{name:'张三'}}">params</router-link>
    
        <router-link :to="{name:'second',query:{name:'李四'}}">query</router-link>
        <router-view></router-view>
      </div>
    </template>

    (1)params传参

     <h1>params对象传参{{$route.params.name}}</h1>

     

     

     

    (2)query传参

    发现query传参并没有会丢失  注意看地址栏 在一开始跳转的时候 发现就在url地址栏上以?拼接了参数路径,而params跳转时没有,所以说这也是params动态路由传参和query动态路由传参的区别,也是params对象传参为什么会消失的问题。

    解决params动态传参刷新后参数丢失问题

    因为params动态路由传参时,url地址并没有拼接,但是query会拼接在地址栏上,所以vue提供给我们另一种动态传参的方式,我们只需要在定义路由时在后面拼接/:name,就可以解决刷新后参数会丢失的问题,注意这里不是以?拼接了路径  

      {
        path: '/first/:name',
        name:'first',
        component:()=>import( '../components/first.vue' )
      },

     跳转

    <router-link to="/first/张三">params</router-link>

    当然 还有一种push写法 也是一样的道理 项目中也是用的比较多的

    对象跳转

        <a @click="$router.push({name:'first',params:{name:'张三'}})">a链接</a>

    $router.push 

      <a @click="$router.push('/first/张三')">a链接</a>

    二、路由传参  ?拼接

    只需要在路由的后面利用?的形式 进行参数的拼接

      <router-link to="/second?name=张三">?传参</router-link>
        <a @click="$router.push('/second?name=张三')">a链接</a>

    三、后退

            <a @click="$router.back()">回退</a>
            <a @click="$router.go(-1)">回退</a>

    go的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

    展开全文
  • 文章目录vue路由传参方式一、页面刷新数据会丢失方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数*该方法可以隐藏URL后的参数方法二:使用Vue全局API:Vue.observable二、页面刷新数据不会丢失...

    vue路由传参方式

    项目中很多情况下都需要进行路由之间的传值,想过很多种方式

    sessionstorage/localstorage/cookie 进行离线缓存存储也可以,用vuex也可以,不过有些大材小用吧,不管怎么说因场景而异

    一、页面刷新数据会丢失

    使用场景:
    页面跳转带id过去

    方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数

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

    eg:点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去

    <div class="examine" @click="insurance(2)">查看详情</div>
    
    // 父组件传值:将id带过去
    methods:{
      insurance(id) {
           this.$router.push({
              name: 'particulars',
              params: {
                id: id
              }
            })
      }
    
    // 路由配置
    {
         path: '/particulars',
         name: 'particulars',
         component: particulars
       }
    
    // 子组件:获取参数id
    this.$route.params.id
    

    温馨提示:该方法刷新页面数据会丢失

    *该方法可以隐藏URL后的参数

    在这里插入图片描述

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

    方法二:使用Vue全局API:Vue.observable

    使用Vue全局API:Vue.observable

    详细教程看如下博客:Vue.observable使用教程

    温馨提示:该方法刷新页面数据会丢失

    二、页面刷新数据不会丢失

    方法一:使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数

    使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数

    methods:{
      insurance(id) {
           //直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/particulars/${id}`,
            })
    }
    
    // 对应路由配置
    {
        path: '/particulars/:id',
        name: 'particulars',
        component: particulars
    }
    
    // 子组件中获取参数
    this.$route.params.id
    

    温馨提示:该方法刷新页面数据不会丢失

    方法二:使用path匹配路由,通过query传参

    使用path匹配路由,通过query传参

    url路径中携带:

    methods:{
      insurance(id) {
            this.$router.push({
              path: '/particulars',
              query: {
                id: id
              }
            })
      }
    
    {
        path: '/particulars',
        name: 'particulars',
        component: particulars
    }
    
    // 子组件获取参数
    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的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    展开全文
  • 路由切换时页面需要使用地址栏传参,但地址栏会暴露参数的值,然后想到了encodeURI加密参数 比如参数是一个对象obj obj:{ id: 1, name: 'Tom' } 那么需要将参数转换为JSON字符串,在使用encodeURI加密,需要...
  • 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //...
  • Vue路由传参以及接收参数的几种方法 vue路由传参方式可以划分为params传参、query传参和url字符串拼接(编程式导航) 方法一:query //传参 this.$router.push({ path: '/deviceInfo', query: { deviceId: '...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接...
  • vue路由传参总结

    2021-06-07 23:22:51
    一.Vue路由传参 1.route-link路由导航 在to跳转链接后传递参数,获取时需要在路由配置path时注明,con
  • Vue 路由传参及获取

    2020-09-07 09:09:11
    号拼接传参,如果有多个可以用&拼接 ’?id=‘+id+’&name=‘+name this.$router.push({ path: '/details', query: { id: 123}}); //query传参,query要用path来引入, this.$router.push({ name: 'details', ...
  • vue路由如何传参 路由传参有两种方式:query和 params 分别简述一下这两种的区别 query方式: 必须定义path属性,【这个path在浏览器地址栏中是可见的】,通过this.$route.query.参数来接收参数, query有...
  • vue路由传参解耦

    2020-05-04 16:24:40
    在我们实现页面接收参数的时候,通常会使用$route.query或者 $route.params去获取路由中传递的参数,
  • 路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。 使用 props 将组件和路由解耦: 布尔模式 商品展示界面传递id的动态参数 <...
  • 1. vue 中的路由跳转可以通过路径跳转, 页可用通过 路由的 name 属性进行跳转 2. 路由跳转是携带参数有两种方式 this.$router.push({ ...另外, 如果不想使用路由传参, 可以考虑使用 sessionStrong 或者
  • VUE路由传参有3种方式

    2020-09-01 16:30:32
    VUE路由传参有3种方式 1)query方式 (push时使用path来匹配) 发起页面:this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn{ id:this.router.query.id; //这里接收参数 } } } 跳转转收页面的...
  • 记录这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题。场景如下:我需要携带参数id跳转到考试页面,在考试页面接收id,但是当考试页面刷新后,参数id就丢失了。(当时我是通过params传参的) 传参...
  • 【vue】vue路由传参的三种方式

    千次阅读 2018-10-22 10:30:13
    传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • Params路由传参分为三步: 1、绑定参数 在你传参的路由绑定参数 2、发送数据 3、接收参数 在路由页面用this.$route.params.listdata收传递过来的参数。 二、query 类似与post请求,传递的数据不会再浏览器地址...
  • 路由传参的时候出现刷新参数丢失问题,具体解决如下: 在进行路由配置的时候使用如下设置进行的配置,用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/...
  • Vue路由传参

    2021-02-23 18:38:35
    // 传递 <a v-bind:href="'#/Student/UpdateStudent?id='+student.id">修改</a> // 接收 使用query接收网址携带的参数 this.$route.query.id
  • 详解vue路由传参的三种方式

    千次阅读 多人点赞 2020-03-27 19:46:25
    在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般...下面我就来说说vue路由传参的三种方式: 方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,518
精华内容 5,407
关键字:

vue路由传参

vue 订阅