如何在 vue.js（使用打字稿）的路由器链接路径中添加变量（来自 getter 的值）？答案

【问题标题】：Haw can I add variable(value from getter) in router-link path in vue.js (with typescript)?如何在 vue.js（使用打字稿）的路由器链接路径中添加变量（来自 getter 的值）？
【发布时间】：2020-06-30 09:37:37
【问题描述】：

我有一个这样的带有路由器链接的按钮`

    <router-link to="summary">
         <button type="button" @click='questionsFinish' class="btn btn-primary" 
                :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
         </button>
     </router-link>

我需要像这样在 router-link 中从 getter 传递值 `

    <router-link to="{{getlang}}/summary">
         <button type="button" @click='questionsFinish' class="btn btn-primary" 
                :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
         </button>
     </router-link>

This is a getter method

 get getlang(): string {
    return this.$lang.getLang();
  }

This is a route

 name: "summary",
 path: "/" + languageParameter + "/summary/"

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

用参数正确设置路由器路径：

  {
   path: '/:languageParameter/summary',
   name: 'About',
   ....
  }

在你的计算中获取 getter 值到组件中：

import { mapGetters } from 'vuex';

@Component({
  computed:{
    ...mapGetters(['getlang'])
  }
})

然后将 getter 的值从 computed 绑定到您的 router-link：

<router-link :to="`${getlang}/summary`">
     <button type="button" @click='questionsFinish' class="btn btn-primary" 
            :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
     </button>
 </router-link>

【讨论】：