第十篇: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>
posted @   开花的马铃薯  阅读(146)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
点击右上角即可分享
微信分享提示
主题色彩