精华内容
下载资源
问答
  • 13 路由传参1.方案一// 路由定义{path: '/describe/:id',name: 'Describe',component: Describe}// 页面传参this.$router.push({path: /describe/${id},})// 页面获取this.$route.params.id2.方案二// 路由定义{path...

    13 路由传参

    1.方案一

    // 路由定义

    {

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

    }

    // 页面传参

    this.$router.push({

    path: /describe/${id},

    })

    // 页面获取

    this.$route.params.id

    2.方案二

    // 路由定义

    {

    path: '/describe',

    name: 'Describe',

    omponent: Describe

    }

    // 页面传参

    this.$router.push({

    name: 'Describe',

    params: {

    id: id

    }

    })

    // 页面获取

    this.$route.params.id

    3.方案三

    // 路由定义

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    // 页面传参

    this.$router.push({

    path: '/describe',

    query: {

    id: id

    `}

    )

    // 页面获取

    this.$route.query.id

    4.三种方案对比 方案二参数不会拼接在路由后面,页面刷新参数会丢失 方案一和三参数拼接在后面,丑,而且暴露了信息

    展开全文
  • 路由传参

    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...

空空如也

空空如也

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

路由传参