允许在vue.js Web应用程序中动态创建sitemap.xml

I have a Vue.JS single page application with a PHP back-end running on apache. The app is running fine, using the vue.js routing to navigate between pages.

I want to dynamically create an XML sitemap based on records in a database (each record has it's own page). I have a .php file which generates the XML and returns text/xml.

<?php 

    header("Content-type: text/xml");
?>

<urlset xmlns="http://www.google.com/schemas/sitemap/0.84" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84 http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">
    <url>
        <loc>https://myapp.com/</loc>
        <priority>1.00</priority>
    </url>

    <?php
          ###### Code for calling the DB
     ?>
</urlset>

In my .htaccess file, I'm redirecting sitemap.xml to my sitemap.php page.

<IfModule mod_rewrite.c>

  RewriteEngine on
  RewriteRule ^sitemap\.xml$ /php/sitemap.php [L]
  RewriteRule ^([A-Za-z0-9-]+)/?$ index.php?shortName=$1 [NC,L]

</IfModule>

However, the vue.js router is intercepting the request and displaying my 404 page.

const routes = [
    // home
    {name: 'home',path: '/',component: Home},

    // all my other routes here

    // 404 catch-all
    { path: '*', component: NotFound}
]

Is there a way to ignore certain routes in the vue.js router? Or am I going about this the wrong way?