精华内容
下载资源
问答
  • 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的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

    展开全文
  • 最近项目中有涉及到列表页跳转到详情页,就遇到了路由传参的问题,还有就是刷新页面的时候数据就获取不到了,于是就好好的看了看官方文档,做了如下的总结,都知道在这些js的框架中路由很重要,它是连接各个页面的...

    最近项目中有涉及到列表页跳转到详情页,就遇到了路由传参的问题,还有就是刷新页面的时候数据就获取不到了,于是就好好的看了看官方文档,做了如下的总结,都知道在这些js的框架中路由很重要,它是连接各个页面的桥梁,而参数在其中扮演着非常重要的角色,在一定意义上决定着两座桥梁是否能够连接成功,在vue中路由传参支持三种方式:

    场景:一个列表页到详情页,一个路由的li标签循环绑定一个数组,点击每一个li标签并携带参数跳转到另外一个路由,显示相应的正确的内容

        <div>
          <ul>
            <li v-for="(item,index) in reportList" :key=index
                @click="goReportDetail(item)">
              <div class="report-user-info">
                <p class="report-user-name" v-text="item.name"></p>
                <p class="report-user-phone" v-text="item.telNo"></p>
              </div>
              <div class="report-user-state">
                <p class="report-user-text" v-text="item.queryType"></p>
                <p class="report-user-time" v-text="item.queryTime"></p>
              </div>
            </li>
          </ul>
        </div>

    1.直接调用this.$router.push()实现携带参数的跳转

    this.$router.push({
        path: '/reportDetails/${item.id}',
    });
    
    这一种方法需要在路由里面配置:
    {
        path: '/reportDetails/:id',
        name: 'reportDetails',
        component: ReportDetails,
    }
    很显然需要在path中添加/:id来对应this.$router.push()中携带的参数。
    在另一路由中可以使用如下方式接收传递的参数
    this.$route.params.id

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

    this.$router.push({
        name: 'reportDetails',
        params: {
                id: item.id
                }
    });
    
    对应路由配置,注意这里这里不能使用:/id来传递参数了,因为路由中已经使用params来携带参数了
    {
        path: '/reportDetails',
        name: 'reportDetails',
        component: ReportDetails,
    }
    在另一路由中可以使用如下方式接收传递的参数
    this.$route.params.id

    3.使用path来匹配路由,使用query来传递参数

    这种情况下query传递的参数会显示在url后面?id=?
    this.$router.push({
        name: 'reportDetails',
        query: {
                id: item.id
                }
    });
    
    对应路由配置
    {
        path: '/reportDetails',
        name: 'reportDetails',
        component: ReportDetails,
    }
    在另一路由中可以使用如下方式接收传递的参数
    this.$route.query.id

    在以上前两种的方式中url是不拼接参数的,所以刷新详情页的时候取不到id,就拿不到对应的详情信息,而第三种方式是把参数拼接在url后面的,所以刷新页面的时候,参数在url链接上不会丢失,所以这一种传参方式比较保险。

    展开全文
  • angular.js路由传参刷新消失的问题

    千次阅读 2018-11-01 12:16:43
    angular.js路由传参刷新消失的问题 1.最近公司用angular.js,发现一个问题,如果是上一个页面携带参数过来,在当前页面刷新,参数会丢失 这里是用params进行参数的传递,参数不会出现在地址栏上,但是刷新界面会...

    angular.js路由传参刷新会消失的问题

    1.最近公司用angular.js,发现一个问题,如果是上一个页面携带参数过来,在当前页面刷新,参数会丢失
    在这里插入图片描述这里是用params进行参数的传递,参数不会出现在地址栏上,但是刷新界面会丢失参数。

    解决办法

    1.路由配置写法
    在URL上面携带配置的参数
    在路由配置的时候把参数配置在URL上面,这个写法参数会出现在地址栏上

    2.HTML页面写法在这里插入图片描述
    两种写法在控制器中获取是一样的,谁有更好的办法,欢迎指正

    展开全文
  • 解决办法: 1.用params时,如果传的参数时id,那么可以在(比如说是A页面跳转道B页面)可以在B页面的url中加上传过来的id,这样id会存在地址栏中,也就传过来了 2.不用params,用query传,数据会保存 ...

    解决办法:

    1.用params时,如果传的参数时id,那么可以在(比如说是A页面跳转道B页面)可以在B页面的url中加上传过来的id,这样id会存在地址栏中,也就传过来了

    2.不用params,用query传,数据会保存

    3.可以存到sessionStorage

    转载于:https://www.cnblogs.com/laofugui/p/8034139.html

    展开全文
  • 出现刷新后数据丢失的情况可分为,1、路由传参;2、从vuex获取参数 首先说一下 1、路由传参路由传参可分为query传参和params传参 (1)、query传参,参数会在地址栏中显示,如果你传的是字符串,刷新后页面的数据...
  • 在写项目的时候,使用params路由传参刷新页面,结果参数报错消失。 原因: 使用params传参的时候,当你跳转到子页面,如果你刷新页面,代表就不是从父级页面跳转过来的,参数当然会消失。 问题解决: 1、使用query...
  • 1.首先介绍基本的两种路由传参方式: 第一个是: 通过params传参 this.$router.push({ name: "newPage", //params对应路由跳转为name方式 params: { id: this.id } }); 另一个页面接收: console.log(this.$...
  • vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
  • 刷新不丢失的方式 this.props.history.push({pathname:`/Apply/${id}`}) 获取参数 this.props.match.params.id 路由文件中的配置 <Route path="/Apply/:id/:orderId?" component={Apply} /> 2、state模式 ...
  • 解决vue 路由传参刷新页面数据丢失

    千次阅读 2018-12-17 18:54:18
    1.1 路由配置: 1.2 A组件传参: 1.3 B组件接收: 1.4 B组件url: 2.解决方案一: 2.1 路由配置: 2.2 A组件传参: 2.3 B组件接收: 2.4 B组件url: 3.解决方案二: 3.1 路由配置: 3.2 A组件传参...
  • 引用:Vue路由传参及传参后刷新导致参数消失处理 - secretAngel - 博客园 项目功能需要,要从列表页跳转到详情页,需要携带参数id,在详情页获取并且使用 1 this.$router.push({name:'list', params...
  • 在师弟页面进行页面刷新之后,就会发现,没有数据了,原因排查发现,页面刷新后,路由传参过来的id没有了。进而导致请求不到数据,进行一些数据操作请求发送不出去。 问题解决: 将路由传参获取到的数据,存储到本地...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:...
  • 路由传参的时候出现刷新参数丢失问题,具体解决如下: 在进行路由配置的时候使用如下设置进行的配置,用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/...
  • 1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面: mounted(){ console.log(this.$route.params.mm) }, 此...
  • params和query,params传值刷新页面是要消失的,然而query却不会,两者的区别就在于query会把传递的参数显示在url地址中 通过vuex vuex 通过vuex来存和取你的数据,把你的数据都存在vuex中,然后...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ ...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...

空空如也

空空如也

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

路由传参刷新消失