精华内容
下载资源
问答
  • 1.params 配置路由格式:/router/:id 传递方式:在path后面跟上对应的值 传递后形成的路径:/router/123,/router/abc const routes=[ //路由配置页 { path:'/user/:userId',...//在 user.vue里写(路由对应子组件) &l

    1.params
    配置路由格式:/router/:id
    传递方式:在path后面跟上对应的值
    传递后形成的路径:/router/123,/router/abc

    const routes=[
    //路由配置页
    {
       path:'/user/:userId',
       component:home
    }
    
    // 在app.vue写
     <router-link  :to="'/user/'+userId">我的</router-link>  
     
    //在 user.vue里写(路由对应子组件)
    <template>
        <div>
           {{userId}}   //拿到上面拼接的值
           {{$route.params.userId}}  //可以直接用
        <div>
    </template>
     <script>
        export default{
            name:'User',
            computed:{
                     usrId(){
                       return  this.$route.params.userId   
                       //取到值   后面userId是路由页配置冒号后面的值
                       //$route是处于活跃状态  拿的就是谁
                     }
             }
    }
     </script>
    

    通过监听标签点击

    this.$router.push({
     path:"/detail",
     params:{
     name:'nameValue',
     code:10011
     }
    });
    

    2.query
    配置路由格式:/router,也就是普通配置 不像上面有冒号那样
    传递方式:对象中使用query的key作为传递方式
    传递后形成的路径:/router?id=1253,/router?id=adc

    //路由配置页
    const Profile = () =>import('../components/Home')
    {
       path:'/profile',
       component:Profile
    }
    
    // 在app.vue写
     <router-link  :to="{path:'/profile',query:{name:'abc',age:18}}">我的</router-link>  //记得v-bind绑定
     //在 user.vue里写(路由对应子组件)
    <template>
        <div>
           {{$route.query.name}} 
        <div>
    </template>
     <script>
        export default{
            name:'User',
            computed:{
                 age(){
                     return  this.$route.query.age 
                 }
             }
    }
     </script>
    

    通过监听标签点击

    <div id=“app”>
        <button @click="btn1click">首页</button>   
        <button @click="btn2click">关于</button>  
    </div>
    
    <script>
    let app=new Vue({
      el:'app',
      data:{
      },
      methods:{
       btn1click(){
         this.$router.push({
            path:'/profile',
            query:{
               name:'zhangsan',
               age:180
            }
         }) 
       },
       btn2click(){
         this.$router.replace('/about')        //history.replaceState()  不能返回
       }
      }
    )}
    </script>
    
    展开全文
  • 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.$route.params.id这种方式来打印出来就可以得到了;(注意:获取参数的时候是$route,跳转和传参的时候是$router)

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

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

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

    通过路由属性配置传参我们可以用this.$route.params.id来获取到id的值,注意this.$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的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    02aa7fc9cfedd5317993f93522083bc5.png

    作者:有梦想的咸鱼前端
    链接:https://www.jianshu.com/p/af698182c425

    展开全文
  •  this.$router.push({path:'/msite', query:{geohash}})this.$router.push({name:'msite', params:{geohash}})query 和path 在一起使用 , 而params和name一起使用获取参数的方法:this.$route.query.XXX ;...

    两种方法都可以使用,不用点是:

    1. 

    this. $router. push({ path: '/msite', query:{ geohash}})
    this.$router.push({name:'msite', params:{geohash}})

    query 和path 在一起使用 , 而params和name一起使用

    获取参数的方法:

    this.$route.query.XXX ; this.$route.params.XXX;

    2. 

    query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

    query:        

    params:    

    展开全文
  • 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的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    展开全文
  • Vue 页面传参方式 Query 和 Params

    千次阅读 2020-01-17 09:19:02
    Vue 页面传参方式 Query 和 Params
  • vue路由传参方式 nuxt

    千次阅读 2018-06-07 09:19:51
    vue路由传参常用的三种方式1、通过params来传递参数(本人常用)传递参数接收参数&lt;li v-for="article in articles" @click="getDescribe(article.id)"&gt;2、通过path跳转 get...
  • Vue路由传参方式

    2019-10-16 18:26:10
    下面来看通过该方式传参实例 这是用来传参的组件 <template> <div> <h1>这是要传参路由</h1> <router-link :to="{name:'testresult',params:{id:a,id2:b},query:{queryId:c}}">...
  • 下列观点只代表个人观点,如有不足之处,烦请指正!!! 遇到问题描述 今天在页面间使用$router.push传参时,发现页面刷新数据之后,路由中params的数据丢失了。 解决办法 ...2.使用query路由传...
  • vue 路由传参 params 与 query两种方式的区别 在使用vue进行路由传参的时候我们将常会用到params和query两种形式,两者是有区别的啊,大家在使用的过程中千万要注意哦 params传参 在路由中假设我们这么定义 { path:...
  • 代码仓:github :https://github.com/cc147151/filterTest // about页面刷新会丢失...'About',query:{'id':1}}) // params还是丢失 // this.$router.push({name:'About',query:{'id':1},params:{'par':'a'}})
  • vue 路由传参方式总结

    2019-09-04 16:53:36
    文章目录vue常用的路由传参方式一:使用```$route```方式二:使用 ```props```将组件与路由解耦```props```传参模式可以分为以下几种:1.布尔值模式 ```true```或 ```false```2.对象模式3.函数模式 vue常用的路由...
  • 文章目录vue路由传参方式一、页面刷新数据会丢失方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数*该方法可以隐藏URL后的参数方法二:使用Vue全局API:Vue.observable二、页面刷新数据不会丢失...
  • query方式: 直白的来说 query 相当于 get 请求,页面跳转的时候,可以在地址栏看到请求参数; 使用方式:使用 path 来匹配路由,然后 通过 query 来传递参数;(也可以用 name 匹配路由) 父组件: this.$...
  • vue路由传参方式

    2021-09-13 11:31:42
    一、路由名称传参 <script> export default { data () { return { id: 1030, } }, methods: { jumpToIndex() { this.$router.push({ name:"index", params: { id:this.
  • 大家都知道vue路由传参有两种query和params,但是前面的是用name还是用path,也许大家容易记混了,今天来帮大家梳理下 1:首先看来query 1.1: path: <li @click="goHrefQuery('/index2')">子组件...
  • 【vue】vue路由传参的三种方式

    千次阅读 2018-10-22 10:30:13
    传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • 路由传参 1、单页面应用 app 所有的内容都在一个html页面上显示,内容的切换用路由去实现 多页面应用 由多个html页面组成,页面的之间的转换由a标签实现跳转 单页面应用和多页面应用的优缺点: 单页面应用:首屏加载...
  • 1.1. vue路由传参有3方法实现中: 1.编程式导航 ,2.声明式导航, 3.字符串拼接 一.编程式导航 : 1.在router-link标签中的to属性中定义要去的页面 <!-- router-link --> <router-link :to="{path:...
  • vue路由传参方式总结

    千次阅读 2019-03-01 17:53:48
    最近在看vue-router的时候碰到的问题,路由传参总共有几种方式,区别在哪里?看了很多大佬的文章总结一下 官方文档:https://router.vuejs.org/zh/guide/essentials/passing-props.html 首先,路由如何接收参数? ...
  • 传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式方式一:params 传参(显示参数) params 传参(显示参数)又可分为 ...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接...
  • Vue路由传参有两种方式,params和query ,他们的区别是什么呢? params传参 this.$router.push({ name:"detail", params:{ name:'nameValue', Code:’this.Code' } }); query传参 query传参 this.$router....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,673
精华内容 2,669
关键字:

vue路由传参的方式query

vue 订阅