vue路由router-link时传递参数

源码资源网

vue路由router-link时传递参数
要在Vue路由中使用 `router-link` 传递参数并输出中文，您可以在 `router-link` 组件的 `to` 属性中包含参数。以下是一个示例代码片段，演示如何在Vue路由中传递参数并输出中文：

1. vue
   
2. <template>
   
3.   <div>
   
4.     <router-link :to="{ name: 'Details', params: { id: 123, name: '张三' }}">查看详情</router-link>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. export default {
   
9.   name: 'MyComponent'
   
10. }
    
11. </script>

复制代码

在这个示例中：
- 我们使用 `router-link` 组件创建到另一个路由的链接。
-  `to` 属性绑定到一个对象，指定了路由名称（'Details'）和参数（id和name）。
-  `id` 参数设置为 `123` ， `name` 参数设置为 `'张三'` ，这是一个中文名字。
- 当点击链接时，路由将导航到带有指定参数的'Details'路由。
确保在Vue Router配置中定义'Details'路由，以处理从 `router-link` 传递的参数。
通过这种方法，您可以在Vue.js中使用 `router-link` 传递参数并输出中文。






在Vue路由中使用 `router-link` 传递参数时，确保在Vue Router配置中正确定义路由，并使用路由参数来匹配传递的参数。以下是一个修正后的示例代码片段，演示如何在Vue路由中传递参数并输出中文，并确保能够正确跳转到指定的详情页面：

1. vue
   
2. <!-- MyComponent.vue -->
   
3. <template>
   
4.   <div>
   
5.     <!-- 使用 router-link 传递参数 -->
   
6.     <router-link :to="{ name: 'Details', params: { id: 123, name: '张三' }}">查看详情</router-link>
   
7.   </div>
   
8. </template>
   
9. <script>
   
10. export default {
    
11.   name: 'MyComponent'
    
12. }
    
13. </script>

复制代码

1. // router/index.js
   
2. import Vue from 'vue'
   
3. import VueRouter from 'vue-router'
   
4. import Details from '../views/Details.vue'
   
5. Vue.use(VueRouter)
   
6. const routes = [
   
7.   {
   
8.     path: '/details/:id/:name',
   
9.     name: 'Details',
   
10.     component: Details
    
11.   }
    
12. ]
    
13. const router = new VueRouter({
    
14.   mode: 'history',
    
15.   base: process.env.BASE_URL,
    
16.   routes
    
17. })
    
18. export default router

复制代码

1. vue
   
2. <!-- Details.vue -->
   
3. <template>
   
4.   <div>
   
5.     <h1>详情页面</h1>
   
6.     <p>参数ID: {{ $route.params.id }}</p>
   
7.     <p>参数姓名: {{ $route.params.name }}</p>
   
8.   </div>
   
9. </template>
   
10. <script>
    
11. export default {
    
12.   name: 'Details'
    
13. }
    
14. </script>

复制代码

在这个示例中，我们在Vue Router配置中定义了一个名为'Details'的路由，该路由接受 `id` 和 `name` 作为参数。在 `MyComponent.vue` 组件中，使用 `router-link` 传递参数到'Details'路由，包括ID和中文姓名。在'Details.vue'组件中，我们输出传递的参数，并展示在详情页面中。
通过这种方式，您可以在Vue路由中正确传递参数并跳转到指定的详情页面。