How to create and use an optional parameter in Vue Router?

在Vue Router中，我们可以通过在路由路径中添加一个问号?来标记参数为可选。这意味着此参数不是必须的，用户可以在没有此参数的情况下访问该路由，也可以提供此参数来访问相同的路由但获得稍微不同的结果或数据。

创建带有可选参数的路由

假设我们有一个Vue应用程序，其中包含一个用户个人资料页，用户ID是可选的。如果提供了用户ID，我们将显示该特定用户的资料；如果没有提供，则显示当前登录用户的资料。在Vue Router的配置中，我们可以如下设置路由：

javascript
const router = new VueRouter({
  routes: [
    {
      path: '/profile/:userId?',
      component: UserProfile
    }
  ]
})

在上面的路由定义中，:userId 是一个动态参数，? 表明这个参数是可选的。这意味着 /profile 和 /profile/123 都是有效的路由，都会导向 UserProfile 组件。

在组件中使用可选参数

在 UserProfile 组件中，我们可以通过 this.$route.params.userId 来访问 userId 参数。根据 userId 的有无，我们可以决定加载当前登录用户的资料还是特定用户的资料。

例如：

javascript
export default {
  data() {
    return {
      userProfile: null
    }
  },
  created() {
    this.fetchUserProfile();
  },
  methods: {
    fetchUserProfile() {
      const userId = this.$route.params.userId || '当前用户ID';

      // 假设有一个 fetchUser 函数负责发送API请求
      fetchUser(userId).then(data => {
        this.userProfile = data;
      });
    }
  }
}

总结

通过在Vue Router中使用可选参数，我们可以创建更灵活的路由策略，同时利用同一个组件来处理多种类似的情况，从而简化项目的结构和提高代码复用性。在实际开发中，这种技巧非常有用，特别是在需要根据URL的变化显示不同数据时。