Настройка маршрутизатора Vue3 с помощью ссылки меню

Question

У меня в проекте есть src / route / router.js :

      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;

Я могу поставить точку останова в своем коде, и она попадает в нее при загрузке страницы.

В App.vue у меня отображается компонент Header.vue :

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

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

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

Компонент заголовка ссылается на другие страницы, не относящиеся к Vue, но для элементов, отмеченных как useRouter, он отображает ссылку следующим образом:

      <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>

На том же Header.vue входит в его шаблон:

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

И в файле Header.vue у меня есть следующий импорт :

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

Ни один из компонентов не загружается в маршрутизатор при нажатии на ссылку. URL-адрес НЕ изменяется с хэш-тегом при нажатии. Но даже ручное редактирование URL-адреса для соответствия маршруту не работает.

Оба компонента работали, когда они были напрямую загружены на страницу. На странице нет ошибок JavaScript, даже если щелкнули элемент, который должен быть перенаправлен.

Answer 1

Код, размещенный здесь, почти правильный, за исключением #urls. Это просто не работает с скомпилированным кодом, размещенным на URL-адресе, отличном от 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;

Так что это действительно сработает, если я сделаю с 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')
            },
          },
        ],
      }, ],
    },
  }
};

Когда вы щелкаете ссылку маршрутизатора, работающую на скомпилированном коде, она отображается правильно, а URL-адрес задан правильно, но вы не можете просматривать таким образом, потому что полученный путь неправильно настроен на сервере. Но это улучшение.

На сервере localhost:1081 dev он работает правильно, но я не понял, как настроить прокси для работы ajax.