Vue 中路由传值的方法

在 Vue 开发中，路由传值是一项非常重要的功能，它允许我们在不同的路由页面之间传递数据。以下将详细介绍几种常见的路由传值方法。

1. 路径参数传值

路径参数传值是一种简单直观的方式。在路由配置文件中定义带有参数的路由路径。例如：

{
    path: '/user/:id',
    name: 'User',
    component: User
}

这里的 :id 就是一个参数占位符。然后，在导航到该路由时，将参数值嵌入路径中：

<router - link :to="`/user/${userId}`">查看用户</router - link>

在目标组件中，可以通过 this.$route.params 来获取参数值：

export default {
    created() {
        const userId = this.$route.params.id;
        console.log(userId);
    }
}

这种方式适合传递一些标识性的数据，比如用户 ID、文章 ID 等。

2. 查询参数传值

查询参数传值通过 URL 中的查询字符串来传递数据。在导航时添加查询参数：

<router - link :to="{ path: '/home', query: { name: '张三', age: 25 } }">前往首页</router - link>

在目标组件中，通过 this.$route.query 获取参数：

export default {
    created() {
        const name = this.$route.query.name;
        const age = this.$route.query.age;
        console.log(name, age);
    }
}

查询参数传值的优点是参数会显示在 URL 中，方便调试，但安全性相对较低，不适合传递敏感信息。

3. 路由元信息传值

路由元信息传值可以在路由配置中定义一些额外的数据。在路由配置文件中：

{
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: {
        requiresAuth: true,
        role: 'admin'
    }
}

在组件中可以通过 this.$route.meta 访问这些元信息：

export default {
    created() {
        const requiresAuth = this.$route.meta.requiresAuth;
        const role = this.$route.meta.role;
        console.log(requiresAuth, role);
    }
}

路由元信息通常用于存储一些与路由相关的配置信息，如权限验证等。

掌握 Vue 中的这些路由传值方法，能够更加灵活地在不同页面间传递数据，提升应用开发的效率和质量，满足各种复杂的业务需求。