script里传参的动态路由

动态路由是指在路由匹配的时候，根据不同的参数生成不同的路由，比如在一个博客网站中，可以根据不同的文章 ID 生成不同的 URL，这就是动态路由。

在使用 script 传参时，可以通过 `$route.params` 来获取动态路由的参数。例如在路由配置中定义了一个动态路由：

{
  path: '/article/:id',
  name: 'article',
  component: Article
}

在 `Article` 组件中，可以通过 `$route.params.id` 来获取当前文章的 ID。

<script>
export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}
</script>

当访问 `/article/123` 时，控制台会输出 `123` 。

相关问题

vue 路由跳转传参

在Vue中，可以使用params或query传递参数进行路由跳转。使用params传参时，可以在<router-link>中使用:name来指定路由名称，并在路由配置中使用path来定义路由路径。在html中，使用$route.params来获取参数，在script中使用this.$route.params来获取参数。使用query传参时，可以在<router-link>中使用:query来指定参数，并在html中使用$route.query来获取参数，在script中使用this.$route.query来获取参数。如果需要跳转到指定路由并传递参数，可以使用this.$router.push()方法，并在该方法中传入目标路由和参数。另外，全局路由对象可以通过$router来访问，当前路由对象可以通过$route来访问。如果不需要传递参数，可以直接在<router-link>中使用name或path来指定路由名称或路径。注意，如果链接以'/'开始，则从根路由开始，如果没有'/'，则从当前路由开始。

vue ts 路由传参

在.js中使用TypeScript进行路由传参时，有几种方式可以实现。引用中的代码示例展示了一种常见的方式，即使用params传参方式。在router/index.ts文件中，可以配置路由的name属性，如name:"Reg"。然后在商品列表页面使用router.push方法进行路由跳转，并将参数通过params传递，例如router.push({ name:"Reg", params:item })，其中item是一个对象，包含了需要传递的参数。在详情页面的模板中，可以使用route.params来获取传递过来的参数，如{{ route.params.name }}来获取商品名称。同时，可以使用$router.back方法返回上一页。需要注意的是，为了使用useRoute和useRouter方法，需要在script标签中使用setup函数，并导入相应的模块。这样就可以实现在Vue.js中使用TypeScript进行路由传参了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue路由传参 vue路由传参](https://download.csdn.net/download/weixin_39709920/87065136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3 / Ts Router详解](https://blog.csdn.net/Royzilong/article/details/123736090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]