vue中路由传值有哪几种方式

个人博客

在 Vue.js 中，路由传值有几种常见的方式，包括通过路径参数、查询参数和路由元数据等。每种方式都有其适用的场景和特点。

1. 路径参数（Path Parameters）

路径参数是 URL 路径的一部分，通常用于需要唯一标识资源的情况，比如用户 ID、文章 ID 等。

定义路由

在定义路由时，可以使用冒号 : 来表示路径参数：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

访问路径参数

在组件中，可以通过 this.$route.params 来访问路径参数：

<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
};
</script>

示例

访问 URL /user/123，this.$route.params.id 将返回 123。

2. 查询参数（Query Parameters）

查询参数是 URL 中以 ? 开头的一部分，通常用于过滤、排序等非关键数据的传递。

定义路由

查询参数不需要在路由配置中显式定义：

const routes = [
  {
    path: '/search',
    component: Search
  }
];

传递查询参数

可以通过路由跳转时传递查询参数：

<template>
  <div>
    <button @click="search">Search</button>
  </div>
</template>

<script>
export default {
  methods: {
    search() {
      this.$router.push({ path: '/search', query: { q: 'vue' } });
    }
  }
};
</script>

访问查询参数

在组件中，可以通过 this.$route.query 来访问查询参数：

<template>
  <div>
    <p>Query: {{ query }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    query() {
      return this.$route.query.q;
    }
  }
};
</script>

示例

访问 URL /search?q=vue，this.$route.query.q 将返回 vue。

3. 路由元数据（Route Meta）

路由元数据是与路由关联的自定义数据，可以在路由配置中定义，用于控制路由的行为，比如权限控制等。

定义路由

在路由配置中定义 meta 字段：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
];

访问路由元数据

在组件中，可以通过 this.$route.meta 来访问元数据：

<template>
  <div>
    <p v-if="requiresAuth">This page requires authentication</p>
  </div>
</template>

<script>
export default {
  computed: {
    requiresAuth() {
      return this.$route.meta.requiresAuth;
    }
  }
};
</script>

示例

如果当前路由的 meta 中有 requiresAuth 字段，this.$route.meta.requiresAuth 将返回 true。

4. 命名视图（Named Views）

命名视图允许在同一路由下同时显示多个视图，通常用于布局中需要多个不同组件同时展示的情况。

5. 路由导航守卫（Navigation Guards）

导航守卫可以在路由切换时进行一些逻辑处理，比如传递数据或检查权限。

定义导航守卫

可以在全局、单个路由或组件内定义导航守卫：

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

总结

• 路径参数：适用于唯一标识资源的情况。
• 查询参数：适用于非关键数据的传递，如过滤和排序。
• 路由元数据：适用于控制路由行为的自定义数据，如权限控制。
• 命名视图：适用于需要在同一路由下显示多个视图的情况。
• 导航守卫：适用于在路由切换时进行逻辑处理，如数据传递和权限检查。