美文网首页
vue-router2路由传参的几种方式

vue-router2路由传参的几种方式

作者: vueLover | 来源:发表于2017-11-05 21:25 被阅读0次

    简单介绍一下vue-router传参的几种,深入学习请移步 vue-router2中文文档

    声明式

    <router-link :to="{path:'newsDetail/'+id}"><router-link>
    
    <router-link :to="{name:'newsDetail',params:{id:123}}"><router-link>
    
    //也可以使用以下方式:
    <router-link v-bind="{to:'/newsDetail/'+id}"><router-link>
    

    编程式

    router.push({ name: 'newsDetail', params: { id: 123 }})  ->/newsDetail/123
    
    router.push({ path: 'newsDetail', query: { id: 123 }}) ->newsDetail?id=123
    
    // 注意这里的 params 不生效
    router.push({ path: '/user', params: { userId }}) // -> /user
    
    //别忘了路由里配置
    { path: '/newsDetail/:id', name:'newsDetail',component: newsDetail}
    
    • 以params的方式在路由之间传递参数,参数可以从this.$route.params中获取,以query的方式在路由之间传递参数,参数可以从this.$route.query中获取。

    相关文章

      网友评论

          本文标题:vue-router2路由传参的几种方式

          本文链接:https://www.haomeiwen.com/subject/szvhmxtx.html