zoukankan      html  css  js  c++  java
  • 第十篇:Vue路由传参

    路由传参

    用于组件与组件之间通过路由传递数据

    通过url正则传递数据

    i)设置

    路由: path: '/goods/detail/:pk'   |   '/goods/:pk/detail/:xyz'
    请求: '/goods/detail/任意字符'    |    '/goods/任意字符/detail/任意字符'
    

    ii)如何传

    <router-link :to="`/goods/detail/${pk}`"></router-link>
    this.$router.push(`/goods/detail/${pk}`)
    

    iii)如何取

    this.$route对象是管理路由参数的,传递的参数会在this.$route.params字典中
    this.$route.params.pk
    

    示例代码

    配置:router/index.js

    const routes = [
        {
            path: '/goods/detail/:pk',
            name: 'GoodsDetail',
            component: GoodsDetail
        },
    ]
    

    传递:GoodsBox.vue

    <router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </router-link>
     
    <!------------------- 或者 ------------------->
     
    <div class="goods-box" @click="goDetail(goods.pk)">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
    <script>
        export default {
            name: "GoodsBox",
            methods: {
                goDetail (pk) {
                    this.$router.push(`/goods/detail/${pk}`);
                }
            }
        }
    </script>
    

    接收:GoodsDetail.py

    <script>
        export default {
            name: "GoodsDetail",
            data () {
                return {
                    pk: '未知',
                }
            },
            // 通常都是在钩子中获取路由传递的参数
            created() {
                this.pk = this.$route.params.pk || this.$route.query.pk;
            }
        }
    </script>
    

    通过url参数传递数据

    i)设置

    路由: path: '/goods/detail'
    请求: '/goods/detail?pk=数据'
    

    ii)如何传

    <router-link :to="`/goods/detail?pk=${pk}`"></router-link>
    <router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>
     
     
    this.$router.push(`/goods/detail?pk=${pk}`)
    this.$router.push({name:'GoodsDetail', query:{pk: pk}})
    

    iii)如何取

    this.$route对象是管理路由参数的,传递的参数会在this.$route.query字典中
    this.$route.query.pk
    

    示例代码

    配置:router/index.js

    const routes = [
        {
            path: '/goods/detail',
            name: 'GoodsDetail',
            component: GoodsDetail
        },
    ]
    

    传递:GoodsBox.vue

    <router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </router-link>
     
    <!------------------- 或者 ------------------->
     
    <div class="goods-box" @click="goDetail(goods.pk)">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
    <script>
        export default {
            name: "GoodsBox",
            methods: {
                goDetail (pk) {
                    // this.$router.push(`/goods/detail?pk=${goods.pk}`);
     
                    // 或者
                    this.$router.push({
                        name: 'GoodsDetail',
                        query: {
                            pk,
                        }
                    });
                }
            }
        }
    </script>
    

    接收:GoodsDetail.py

    <script>
        export default {
            name: "GoodsDetail",
            data () {
                return {
                    pk: '未知',
                }
            },
            // 通常都是在钩子中获取路由传递的参数
            created() {
                this.pk = this.$route.params.pk || this.$route.query.pk;
            }
        }
    </script>
    
  • 相关阅读:
    树莓派4 (1)一键配置
    Android编码学习之Fragment
    android编码学习
    自动化中app支持schema跳转
    jenkins持续集成
    测试环境运维文章集锦
    HTML5 data-* 自定义属性
    了解一下JavaScript的未来——ECMAScript5
    ECMAScript5的其它新特性
    ECMAScript5 Array新增方法
  • 原文地址:https://www.cnblogs.com/cnhyk/p/12324761.html
Copyright © 2011-2022 走看看