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>
    
  • 相关阅读:
    ExtJs学习准备工作(二) firebug firefox插件的安装 全新时代
    Hibernate系统中调试SQL方式 全新时代
    Eclipse工程出现红叉导致无法编译的问题 全新时代
    javascript 取table中内容
    Asp.Net中清空所有textbox的几种方法
    SQL Server:使用系统存储过程实现的通用分页存储过程
    C# 检查网络是否连通
    sq分页原理
    SQL Server:日志备份和差异备份还原中的常见问题示例
    javascript:连接数据库
  • 原文地址:https://www.cnblogs.com/cnhyk/p/12324761.html
Copyright © 2011-2022 走看看