精华内容
参与话题
问答
  • 路由传参

    2019-07-14 22:34:34
    路由传参 在node.js后端路由有三种传参方式 1,get传参 把参数拼接在地址栏 url?key=value&k=v… 接收: 用req.query 2,post传参 在请求的主体传参 接收:用req.body 3,path传参 /key/100 (/key/:id) 接收:...

    路由传参
    在node.js后端路由有三种传参方式
    1,get传参
    把参数拼接在地址栏 url?key=value&k=v…
    接收: 用req.query
    2,post传参
    在请求的主体传参
    接收:用req.body
    3,path传参
    /key/100 (/key/:id)
    接收:req.params.id

    前端路由传参方式

    // { path: '/foo', name:'foo', component: Foo } 路由规则
        // 选项:name 给当前的规则取名
        // 路径跳转 router.push('/foo')
        // 名称跳转 router.push({ name: 'foo'})
    

    get方式

    // 传递  query ?后地址传参  get传参   #/register?plan=private
    this.$router.push({ path: 'register', query: { plan: 'private' }})
    // 获取
    this.$route.query.plan
    

    path方式

    // 传递  params 路径传参     #/foo/:userId  ---> /foo/123
    this.$router.push({ name: 'foo', params: { userId: '123' }})
    // 获取
    this.$route.params.userId
    

    outerouter和route的区别

    $router 是VueRouter的实例,可以导航到不同的地址
    $router.push() 路由跳转 跳转到另一个页面
    $router.go()

    $route 为一个跳转的路由对象,可以获取到一些数据
    $route.query // get user?id=100
    $route.params // path user/100
    $route.path // 获取#后的地址

    展开全文
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:...

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;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的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    9d460cffa7562e866a29e208863ae9bd.png

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

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

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

    参考文章:

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

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


    备忘一下。


    展开全文
  • 路由作为单页面应用连接页面的桥梁,而参数在其中...具体查看官网:路由组件传参了解完了路由组件传参原理以后,接下来我们总结一下路由传参的方法和技巧:路由传参方案路由传参方法一:1. 路由配置{path: '/descr...

    路由作为单页面应用连接页面的桥梁,而参数在其中扮演着非常重要的角色,在两座之间桥梁是否能够连接成功起着重要作用。

    在vue中根据vue-router官网,我们知道vue路由组件传参提供了三种基本的传参方式:布尔模式、对象模式、函数模式;具体查看官网:路由组件传参

    了解完了路由组件传参原理以后,接下来我们总结一下路由传参的方法和技巧:

    路由传参方案

    路由传参方法一:

    1. 路由配置

    {

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

    }

    2. 使用方法

    // 直接调用$router.push 实现携带参数的跳转url

    this.$router.push({

    // 这个id是一个变量,随便是什么值都可以

    path: /describe/${id}`,

    })

    3,获取方法(在describe页面)

    $route.params.id

    使用以上方法可以拿到上个页面传过来的id值

    vue路由传参方法二:

    1. 路由配置

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    // 默认配置

    2. 使用方法

    this.$router.push({

    name: 'Describe',

    params: {

    id: id

    }

    })

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

    3.获取方法(在describe页面)

    $route.params.id

    同方法一,一样使用params获取

    vue路由传参方法三:

    1. 路由配置

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    // 默认配置

    2. 使用方法

    this.$router.push({

    path: '/describe',

    query: {

    id: id

    }

    })

    // params换成了query

    3.获取方法(在describe页面)

    $route.query.id

    这种方式用query依然可以获取参数id,和前面用的params获取的区别在于,用query获取的id值会在url中有显示,可以看到你传过来的值。

    $route使用小技巧

    1. $route.path

    类型: string

    字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。

    2. $route.params

    类型: Object

    一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

    3. $route.query

    类型: Object

    一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

    4. $route.hash

    类型: string

    当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。

    5. $route.fullPath

    类型: string

    完成解析后的 URL,包含查询参数和 hash 的完整路径。

    使用总结

    1.this.$router.push 进行编程式路由跳转。

    2.router-link 进行页面按钮链式路由跳转。

    3.this.$route.params 获取路由传递参数。

    4.this.$route.query 获取路由传递参数。

    5.params和query都是传递参数区别在于params不会再url上显示出现,并且params参数是路由的一部分,是一定要存在的,否则无法显示视图。

    6.params传递参数,需要使用name进行路由跳转,否则无法传递。

    7.params传递参数刷新会丢失数据,/router/:id方式上的id除外。

    8.query显示拼接在url上,刷新不丢失,不是必须有,router/:id方式则必须有id参数,否则无法正确进入视图。

    9.props组件传值,也可以传递参数,但传递的只能是静态参数。

    展开全文

空空如也

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

路由传参