0

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 the is 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.

GeeWhizBang
  • 699
  • 4
  • 27
  • The problem seems to be that it does not support #XXXX routes. They have to be at the root. If I run in dev server, this works, but currently with the autogenerated file running on a server running other stuff, it doesn't like http:///index.html#xxxx – GeeWhizBang Apr 21 '21 at 00:40

1 Answers1

0

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.

GeeWhizBang
  • 699
  • 4
  • 27