Setting up Vue3 Router with menu link

Question

I have src/route/router.js in my project:

const Reservation = () => import("../components/Reservation.vue");
const Scheduler = () => import("../components/Scheduler.vue");

const routes = [
  {
    path: "/index.html#reservation",
    name: 'reservation',
    component: Reservation,
  },{
    path: "/index.html#scheduler",
    name: 'scheduler',
    component: Scheduler,
  }
];

export default routes;

I can put a breakpoint in my code, and it hits this when the page loads.

In App.vue I have the Header.vue component being rendered:

<template>
  <Header></Header>
</template>

<script>
import Header from './components/Header.vue';

export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

The header component links to other non-vue pages, but on elements marked as useRouter it renders a link as follows:

<li v-for='child in topLevel.children' :key='child.text'>
  <span v-if="child.useRouter"><router-link :to="child.link">{{ child.text }}</router-link></span>
  <span v-if="!child.useRouter"><a :href="child.link">{{ child.text }}</a></span>
</li>

On the same Header.vue theis included in its template:

  ...
  </div>
     <router-view></router-view>
  </div>
</template>

And I have the following imports in the Header.vue file:

import { ref } from 'vue';
import axios from 'axios';

Neither of the components load into the router when the link is clicked. The url does NOT change with the hash tag when clicked. But even manually editing the url to match the route does not work.

Both components worked when they were directly loaded on the page. There are no JavaScript errors on the page even when an element that should be routed is clicked.

Answer 1

The code posted here is nearly correct, with the exception of the #urls. It just doesn't work with the compiled code being hosted on a URL other than root.

import { createWebHistory, createRouter } from "vue-router";
import Reservation from "../components/Reservation.vue";
import Scheduler from "../components/Scheduler.vue";

const routes = [
  {
    path: "/reservation",
    name: 'reservation',
    component: Reservation,
  },{
    path: "/scheduler",
    name: 'scheduler',
    component: Scheduler,
  }
];

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router;

So this actually works if I do the following with vue.config.js:

const path = require("path");

module.exports = {
  publicPath: '/vue/dist/index.html',
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@../styles/_colors.scss";'
      }
    }
  },
  devServer: {
    proxy: "http://192.168.0.44",
  },
  configureWebpack: {
    module: {
      rules: [{
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              fiber: require('fibers')
            },
          },
        ],
      }, ],
    },
  }
};

When you click on a router link running on compiled code, it renders correctly, and the url is set correctly, but you can't browse that way because the resulting path is not setup correctly on the server. But it is an improvement.

On the localhost:1081 dev server, it runs correctly but I haven't figured out how to set the proxy for ajax to work.