使用Vue Router进行路由组件传参的实现方式

// 导入Vue和VueRouter
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserProfile from './components/UserProfile.vue';

Vue.use(VueRouter);

// 创建路由器实例
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserProfile }
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  created() {
    console.log('User ID:', this.$route.params.id);
  }
};
</script>

// 更新router配置
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserProfile }
  ]
});

// 在导航时附加查询字符串
this.$router.push({ name: 'UserProfile', params: { id: '123' }, query: { source: 'homepage' } });

<script>
export default {
  created() {
    console.log('Query Parameters:', this.$route.query);
  }
};
</script>

router.beforeEach((to, from, next) => {
  if (to.name === 'UserProfile') {
    getUserData(to.params.id).then(user => {
      // 将数据存储在组件的props中
      to.meta.user = user;
      next({ ...to });
    }).catch(error => {
      next(false); // 导航到错误页面
    });
  } else {
    next();
  }
});

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.user = to.meta.user;
    });
  },
  computed: {
    user() {
      return this.$route.meta.user;
    }
  }
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', name: 'UserProfile', component: UserProfile }
  ]
});

this.$router.push({ name: 'UserProfile', params: { id: '123' }});

this.$router.push({ name: 'UserProfile', params: { id: '123' }, query: { source: 'homepage' }});

export default {
  created() {
    console.log('Dynamic Parameter:', this.$route.params.id);
    console.log('Query String:', this.$route.query.source);
  }
};