使用props传递路由之间的参数

最新推荐文章于 2023-08-03 22:05:25 发布

Record growth...

最新推荐文章于 2023-08-03 22:05:25 发布

阅读量173

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128665778

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

之前使用的是通过$route.params.X传递参数，这次使用props，方法分为两步。

①在index.js中开启可以传递参数

  {
    // 注意参数后面有一个冒号
    path: '/user/:username/:id/',
    component: () => import('../views/UserView.vue'),
    props: true, //传参用
  },

②在具体的路由中接收

<template>
    <div>
        <h3>个人中心</h3>
        <p>通过$route.params.X传递参数</p>
        {{ $route.params.username }} --- {{ $route.params.id }}
        <hr>
        <p>通过props传递参数</p>
        {{ username }} === {{ id }}
    </div>
</template>

<script>
export default {
    created(){
    
    },
    props: ["username", "id"]
}
</script>

<style>

</style>