如何从href链接传递vue数据值或id来加载新组件以显示此值或id？

在Vue中，可以通过多种方式从href链接传递数据值或id来加载新组件并显示该值或id。以下是几种常见的方法：

1. 使用路由参数（推荐）

如果你使用的是Vue Router，可以通过路由参数来传递数据。

步骤：

定义路由：在路由配置中定义一个带参数的路由。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import YourComponent from './components/YourComponent.vue';

const routes = [
  {
    path: '/your-path/:id',
    name: 'YourComponent',
    component: YourComponent
  }
];

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

export default router;

导航到该路由：通过编程式导航或链接跳转到该路由，并传递参数。

<!-- 使用链接 -->
<router-link :to="{ name: 'YourComponent', params: { id: 123 }}">Go to YourComponent</router-link>

<!-- 或者使用编程式导航 -->
<script>
export default {
  methods: {
    goToYourComponent() {
      this.$router.push({ name: 'YourComponent', params: { id: 123 } });
    }
  }
};
</script>

在组件中获取参数：在目标组件中通过this.$route.params.id获取传递的参数。

// YourComponent.vue
<template>
  <div>
    ID: {{ id }}
  </div>
</template>

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

2. 使用查询参数

另一种方法是使用查询参数（query）来传递数据。

步骤：

导航到该路由：通过链接或编程式导航传递查询参数。

<!-- 使用链接 -->
<router-link :to="{ path: '/your-path', query: { id: 123 }}">Go to YourComponent</router-link>

<!-- 或者使用编程式导航 -->
<script>
export default {
  methods: {
    goToYourComponent() {
      this.$router.push({ path: '/your-path', query: { id: 123 } });
    }
  }
};
</script>

在组件中获取参数：在目标组件中通过this.$route.query.id获取传递的参数。

// YourComponent.vue
<template>
  <div>
    ID: {{ id }}
  </div>
</template>

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

3. 使用状态管理库（如Vuex）

如果你的应用使用了状态管理库（如Vuex），可以通过全局状态来传递数据。

步骤：

定义状态：在Vuex store中定义一个状态。

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      id: null
    };
  },
  mutations: {
    setId(state, id) {
      state.id = id;
    }
  }
});

export default store;

设置状态：在导航到新组件之前，通过mutation设置状态。

// 在某个组件中
<script>
export default {
  methods: {
    goToYourComponent() {
      this.$store.commit('setId', 123);
      this.$router.push('/your-path');
    }
  }
};
</script>

在组件中获取状态：在目标组件中通过this.$store.state.id获取传递的状态。

// YourComponent.vue
<template>
  <div>
    ID: {{ id }}
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$store.state.id;
    }
  }
};
</script>