Javascript 使用菜单链接设置Vue3路由器

我的项目中有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中，我将呈现标题.vue组件：

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

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

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

单击链接时，两个组件都不会加载到路由器中。单击时，url不会随哈希标记更改。但是，即使手动编辑url以匹配路由也不起作用

---

这两个组件在直接加载到页面上时都可以工作。即使单击了应该路由的元素，页面上也没有JavaScript错误。

此处发布的代码几乎是正确的，除了#URL。它只是不适用于托管在根以外的URL上的编译代码

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代理。

问题似乎在于它不支持#XXXX路由。它们必须是根源。如果我在dev服务器上运行，这是可行的，但是当前在运行其他东西的服务器上运行自动生成的文件，这与http:///index.html#xxxx

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

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;

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')
            },
          },
        ],
      }, ],
    },
  }
};