如何使用vue-router在方法中建立VUE链接

Question

我是VUE.JS的新手 ，我爱上了它！ 我喜欢vue-router和router-link ！ 他们真棒！

现在，我有一个表，其中填充了来自axios的数据，我想在自定义方法中使用此数据构建链接，以使团队名称可单击。

这里是模板：

  <BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable>

爱可信返回ID，名称，用来作为更新表中的其他数据在这里

基本上，我需要使用axios的接收到的数据更新表中的值。 就像是：

    team: '<a v-bind:href="club/'+team.id+'">'+team.team+'</a>',

要么

    team: '<router-link :to="club/'+team.id+'">'+team.team+'</router-link>',

但是显然它不起作用...

如何建立链接？

Answer 1

我在列表设置中使用自定义列事件和格式化程序修复了该问题：

                       {
                        field: 'match',
                        title: 'Match',
                        formatter (value, row) {
                            return `<a href="/matches/${row.pos}">${value}</a>`
                        },
                        events: {
                            'click a': (e, value, row, index) => {
                               e.preventDefault();
                                this.$router.push(`/matches/${row.pos}`)
                            }
                        }
                    },

另一个解决方案 ：

只是在具有链接而不是表配置的JSON代码的情况下，才在Mounted（）中添加click监听器，并在JSON HTML链接中添加格式正确的数据集：

   team: "<a href=\"/club/"+team.id+"\" data-to='{\"name\": \"team\",\"params\":{\"teamId\":"+ team.id+"}}'>"+ team.team+"</a> "+userCode

这里的听众：

mounted() {
        window.addEventListener('click', event => {
            let target = event.target;
            if (target && target.href && target.dataset.to) {
                event.preventDefault();
                const url = JSON.parse(target.dataset.to);
                //router.push({ name: 'user', params: { userId: '123' } })
                this.$router.push(url);
            }
        });
    }

Answer 2

对于您的问题，这可能是较短的解决方案：

 routes = [
 {
 component : 'club',
 name : 'club',
 path : '/club/:teamid'
 }
]

 <a @click="$router.push({ name: 'club', params: { teamid: team.id}})">team.team</a>