How to set menu link to section id in Vue JS?

Question

Vue.js

Hello. There is a landing menu, the links of which lead to the desired block with page scrolling. How to correctly display links?

<ul class="menu-list">
  <li><a class="menu-list-item" href="#about">About Me</a></li>
  <li><a class="menu-list-item" href="#users">Users</a></li>
  <li><a class="menu-list-item" href="#register">Sign Up</a></li>
</ul>

If you output like this, then the links do not work:

<li><router-link class="menu-list-item" to="#about">About Me</router-link></li>

Routes are also set in router:

{
    path: '/about',
    name: 'About',
    component: () => import('../components/About.vue')
  },
  {
    path: '/users',
    name: 'Users',
    component: () => import('../components/Users.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../components/Register.vue')
  }

Answer 1

If it's a single page that scrolls, no router is needed.