如何使用 vue-router 和 router-link 来处理在 jquery 模块中动态创建的 links 这样的数据表？

Question

我尝试了一段时间 "integrate" datatables.net (https://datatables.net/) 使用 Vue 应用程序。

最终我偶然发现了一些评论，这些评论基本上建议不要尝试集成，而是通过 mounted/created 事件利用 jquery 模块和 "hook" 它们。

因此，按照这种思路，我几乎可以使用以下代码

<template>
<table aria-describedby="feedback-history_info" role="grid" id="feedback-history" class="table table-bordered table-striped dataTable">
    <thead>
        <tr role="row">
            <th>ID</th>
            <th>Created Date</th>
            <th>Project</th>
            <th>Reviewer</th>
            <th>Status</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>ID</th>
            <th colspan="1" rowspan="1">Created Date</th>
            <th colspan="1" rowspan="1">Project</th>
            <th colspan="1" rowspan="1">Reviewer</th>
            <th colspan="1" rowspan="1">Status</th>
        </tr>
    </tfoot>
</table>
</template>

<script>
import $ from 'jquery'

// Require needed datatables modules
require('datatables.net')
require('datatables.net-bs')

import moment from 'moment'

export default {
    name: 'Feedback',
    data() {
        return {}
    },
    mounted() {
        $('#feedback-history').DataTable({
            "ajax": "/index.sjs?list",
            "processing": false,
            "serverSide": true,
            "columns": [
                {
                    "data": "id"
                },
                {
                    "data": "created"
                },
                {
                    "data": "projectName"
                },
                {
                    "data": "reviewer"
                },
                {
                    "data": "status"
                }
            ],
            "columnDefs": [{
                    "render": function(data, type, row) {
                        return moment(parseInt(data)).format('MMMM Do YYYY');
                    },
                    "targets": 1
                },
                {
                    "render": function(data, type, row) {
                        // I want to use router-link similar to following
                        return `<router-link :to="{ name: 'FeedbackEdit', params: { feedbackId: ${ row.id } }}">${ row.projectName }</router-link>`

                        // To render as ...
                        // <a href="/edit/feedback/${row.id}">${data}</a>
                    },
                    "targets": 2
                },
                {
                    "visible": false,
                    "targets": [0]
                }
            ]
        })
    }
}
</script>

<style>
</style>

唯一的问题是在我的数据表单元格中呈现 links。因为我正在使用 vue-router，所以我需要通过 router-link 到 "handle links" 来 vue-router。（请参阅代码中的注释）。

感谢任何帮助。

Answer 1

最后我没有用router-link.

相反，我使用了 vuex 并将足够的会话信息保存到 vuex 存储中，以便在页面刷新时我可以适当地重新呈现视图。

虽然从技术上讲这是页面刷新或 "page flip" 而不是使用 DOM（或影子-DOM）来操作视图的反应式 SPA 方式，但它确实在没有更好的方法的情况下提供接近足够的体验。

如何使用 vue-router 和 router-link 来处理在 jquery 模块中动态创建的 links 这样的数据表？

How to use vue-router and router-link to handle links dynamically created in jquery modules such a datatables?

javascript

jquery

vue.js

vue-router