直接在路径中定义参数-同时传参数了-巧升级技
一、直接在路径中定义参数
在Vue Router里，我们可以在路由设置里面直接写上参数，这种做法就像是把参数直接贴在了URL上，特别适合那种想要直接展示参数的情况。比如这样配置：
``` // 路由配置 { path: '/user/:id', name: 'user-profile', component: UserProfile } ```然后我们就可以用命名路由来跳转，同时传参数了：
``` this.$router.push({ name: 'user-profile', params: { id: 123 } }); ```在组件里，我们可以这样获取参数：
``` this.$route.params.id; ```二、通过props传递参数
通过props传递参数，可以让参数更明确地传给组件，这样不仅让组件更易于复用，也降低了组件之间的耦合。我们在路由配置里设置props：
``` // 路由配置 { path: '/user/:id', name: 'user-profile', component: UserProfile, props: true } ``` 或者： ``` // 或者这样配置 props: (route) => ({ id: route.params.id }) ```然后在组件里，我们就可以通过props接收参数：
``` props: ['id'] ```三、路由跳转时通过query传递参数
用query传递参数的好处是不用改路径，适合那种需要传很多参数的场景，比如搜索、筛选等。跳转时这样传参数：
``` this.$router.push({ name: 'user-profile', query: { search: 'Tom' } }); ```组件里获取参数是这样的：
``` this.$route.query.search; ``` 在Vue里，带参数的命名路由主要有三种方法：直接在路径中定义参数、通过props传递参数、通过query传递参数。每种方法都有它适用的情况和好处，开发者可以根据自己的需要来选择。 - 直接在路径中定义参数：适合需要参数在URL上直接展示的情况。 - 通过props传递参数：增强组件的可复用性和解耦性。 - 通过query传递参数：适合需要传递多个参数而不改变URL的情况。 合理运用这些方法可以让你的Vue项目路由管理更加清晰高效。如果你是Vue的新手或者在优化项目，这篇文章希望对你有所帮助。