Vue.js 使用vue中的路由器链接绑定数据

我已经在我的组件中声明了一个数据变量。有一个选择框可动态更改此数据值。我想在路由器链接中使用此数据值的内容。但不知何故，它不起作用

以下是我的代码：

<template>
  <div class="row bg-blue content-padding pdt-70 relative d-flex">
    <div class="col-md-8">
      <div class="row mgb-60">
        <form>
            <div class="col-8 form-group mgb-30">
              <label for="work-profile" class="color-white">Work Profile*</label>
              <select id="work-profile" v-model="page" name="work-profile" class="form-control">
                  <option value="self-employed">Self Employed</option>
                  <option value="salaried">Salaried</option>
              </select>
            </div>
            <div class="col-12 form-group">
                <router-link :to=["/"+page]>
                <button type="submit" class="btn form-button button-blue d-flex-inline justify-content-center align-items-center color-white bg-blue">Get Started</button>
                </router-link>
            </div>
        </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LandingPage",
  data: function()
  {
      return{
      page:'salaried'
      }
  },
  components: {
  },
};
</script>

工作概况*
自营的
工薪
开始
导出默认值{
名称：“登陆页面”，
数据：函数（）
{
返回{
页码：'受薪'
}
},
组成部分：{
},
};

将

替换为

您不需要将

[]

绑定到