How to manage my custom single page routes (vuejs)

Frappe Framework Customization
1

Hi all,
I have a single page app in www directory
I am using vuejs for that
I use cdn for creating that ,I want to manage my custom single page’s routes
how can i do that?

2

create a directory like vue-router2 in www

index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
   
  <title>Vue sample</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="/vue-router2/index.js" type="module" crossorigin></script>
  <style>
    .body { background: #eee; padding: 10px; margin-top: 20px; }
  </style>
 </head>
 <body>
{% raw %}
  <main>
    <a href="#/">Home</a> |
    <a href="#/about">About</a> |
    <a href="#/404">404</a>
    <p>{{ f_name }}</p>
    <div class="body">
      <component :is="currentView" />
    </div>
  </main>
{% endraw %}
 </body>
 </html>

index.js

const { reactive, computed, createApp} = Vue

var Home = {
        template: `
        <div>
          Home time: <b>{{ f_name }}</b>
        </div>
      `,
      data() {
        return {
          currentPath: window.location.hash,
          f_name: "hassan" 
        }
      }
    }

var About = {
        template: `
        <div>
          About
        </div>
        `
      }

var NotFound = {
        template: `
        <div>
          Not found
        </div>
        `
      }

const routes = {
  '/': Home,
  '/about': About
}

const App = createApp({
  data() {
    return {
      currentPath: window.location.hash,
      f_name: "ali" 
    }
  },
  
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },

  mounted() {
    
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		});
  }
}).mount('main')

After that run bench restart command
Next you can use your router in your custom page
like this localhost:8000/vue-router2/#/your_custom_url