Vue <router-view /> doesn't show anything

Viewed 823

So I deploy this app in my server using sub directories like MyServer.com/vue/.

Inside my App.vue only show <router-view />, on local this application runs smoothly, and there is no error on console.

App.vue:

<template>
  <router-view/>
</template>

<script>
export default { };
</script>

<style></style>

route.js:

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
    redirect: "/dashboard",
    children: [
      // Children routes
    ],
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  mode: 'hash',
});

export default router;

main.js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./route";
import ElementPlus from "element-plus";
import { Chart, registerables } from "chart.js";
import "element-plus/dist/index.css";
import "./styles/index.scss";

const app = createApp(App);

app.use(router);
app.use(ElementPlus);
app.use(Chart.register(...registerables));

app.mount("#app");
0 Answers
Related