VUE中接收路由参数

源码资源网

VUE中接收路由参数
在Vue.js中接收路由参数可以通过 `this.$route.params` 来获取。以下是一个示例，展示如何在Vue组件中接收路由参数并进行中文输出：
假设您有一个名为 `UserDetail` 的组件，用于显示用户的详细信息。您可以在路由定义中传递用户ID作为参数，并在组件中接收和显示该参数。
1. 在路由定义中传递参数：

1. {
   
2.   path: '/user/:id',
   
3.   name: 'UserDetail',
   
4.   component: UserDetail
   
5. }

复制代码

2. 在组件中接收和显示参数：

1. vue
   
2. <template>
   
3.   <div>
   
4.     <h1>用户详情</h1>
   
5.     <p>用户ID: {{ userId }}</p>
   
6.   </div>
   
7. </template>
   
8. <script>
   
9. export default {
   
10.   data() {
    
11.     return {
    
12.       userId: null
    
13.     };
    
14.   },
    
15.   created() {
    
16.     // 通过this.$route.params获取路由参数
    
17.     this.userId = this.$route.params.id;
    
18.   }
    
19. };
    
20. </script>

复制代码

在上面的示例中，当访问 `/user/123` 时，路由参数中的 `id` 将被传递给 `UserDetail` 组件，并在页面上显示用户ID。您可以根据需要在组件中使用路由参数进行其他操作。
希望这可以帮助您在Vue.js中接收路由参数并进行中文输出。