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

【问题标题】：Setting up Vue3 Router with menu link使用菜单链接设置 Vue3 路由器
【发布时间】：2021-07-15 02:00:31
【问题描述】：

我的项目中有 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>

header 组件链接到其他非 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 错误。

【问题讨论】：

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

标签： javascript vuejs3 vue-router4

【解决方案1】：

这里发布的代码几乎是正确的，除了#urls。它只是不适用于托管在根以外的 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 开发服务器上，它运行正常，但我还没有弄清楚如何设置代理以使 ajax 工作。

【讨论】：