Vue 路由传参秘籍：跨页数据传输轻松搞定

2023-12-28 13:24:04

Vue 路由传参：掌握前端导航中的数据传递

前言

在单页应用（SPA）中，在路由之间传递数据至关重要。Vue.js 提供了多种机制来实现这一目标，从路由参数到全局事件总线。本文将深入探讨这些技术，帮助你掌握 Vue 路由传参的精髓。

路由参数

路由参数允许你将动态数据作为参数嵌入到路由路径中。例如：

{
  path: '/users/:id',
  component: User
}

当用户访问 /users/1 时，$route.params.id 将包含值 1，可用于获取特定用户的数据。

查询字符串

查询字符串是附加在 URL 末尾的键值对，用于传递数据。例如：

/users?id=1

你可以使用 $route.query.id 来访问查询字符串参数的值。

编程式导航

通过 $router.push() 方法，你可以动态地导航到另一个页面，并传递数据：

this.$router.push({
  path: '/users/1',
  query: { id: 1 }
});

路由守卫

路由守卫允许你在导航发生前或后执行特定操作。例如，你可以使用守卫来检查用户是否已登录或有权访问某个页面：

router.beforeEach((to, from, next) => {
  if (to.path === '/users/1' && !this.$store.getters.isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

props

props 是向子组件传递数据的常用方法。在父组件中：

<template>
  <child-component :user="user"></child-component>
</template>

<script>
export default {
  data() {
    return {
      user: { id: 1, name: 'John Doe' }
    };
  }
};
</script>

在子组件中：

<template>
  <div>
    <h1>{{ user.name }}</h1>
  </div>
</template>

<script>
export default {
  props: ['user']
};
</script>

Vuex

Vuex 是一个状态管理库，允许你在 Vue 应用中共享数据。你可以使用 Vuex 来跨组件传递数据，而无需直接传递 props：

// Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// Component A
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};

// Component B
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};

全局事件总线

全局事件总线是一种广播事件并允许其他组件监听和响应的方式。例如：

// Event bus
const eventBus = new Vue();

// Component A
export default {
  methods: {
    emitMessage() {
      eventBus.$emit('message', 'Hello, world!');
    }
  }
};

// Component B
export default {
  mounted() {
    eventBus.$on('message', (message) => {
      console.log(message);
    });
  }
};