'router-link not working on datatable vue3

I am new on Vue3. I am using datatable on Vue3, but router-link is not working there. I want a Button where i can go another page without refreshing. I know that i can achieve this with "router-link". But i cant find any solution how tou use "router-link" on datatable. Here is my code:

   methods:{
getCategories()
    {
     axios
    .get("http://localhost/listagram-vue/api/categories")
    .then((response)=>
    {
      $('#example').DataTable({
            responsive: true,
          data:response.data,
          columns:[
                {
                    data: 'id',
                    name: 'id',
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'parent_id',
                    defaultContent: 'parent_id'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                data: 'action',
                className: "dt-center editor-edit",
                defaultContent: ' <router-link to="/categories/create" class="btn btn-primary btn-sm">EDIT</router-link>|<button class="btn btn-danger btn-sm" onclick="return confirm(\'Are you sure?\')">Delete</button>',
                orderable: false
                }
            ]
      });
    })
    }
    }

Now my question is how to make work this router-link?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source