在vue中用router-link绑定数据

Question

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

这是我的代码：

<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>

Answer 1

将 <router-link :to=["/"+page]> 替换为 <router-link :to="'/'+page"> 你不需要 [] 绑定 to