Vue:如何根据选择的选项更改路由，并在<select>元素中显示默认的选择选项？

<template>
  <div>
    <!-- 绑定select元素的值到selectedOption，并显示默认选项 -->
    <select v-model="selectedOption">
      <option disabled value="">请选择一个选项</option>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>

    <!-- 使用Vue Router的router-link组件来导航 -->
    <router-link :to="`/${selectedOption}`">前往 {{ selectedOption }}</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 默认选项
      selectedOption: 'home',
      // 可选选项列表
      options: [
        { text: '首页', value: 'home' },
        { text: '关于', value: 'about' },
        { text: '联系我们', value: 'contact' }
      ]
    };
  },
  watch: {
    // 监听selectedOption的变化，当选项改变时，使用Vue Router进行导航
    selectedOption(newValue) {
      this.$router.push(`/${newValue}`);
    }
  },
  mounted() {
    // 当组件挂载时，确保路由与selectedOption同步
    this.$router.push(`/${this.selectedOption}`);
  }
};
</script>

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

const router = new VueRouter({
  routes // short for `routes: routes`
});