principal.js
import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld"; import User from "./components/User"; Vue.use(VueRouter); const router = new VueRouter({ routes: [ { path: "/", name: "HelloWorld", component: HelloWorld, children: [{ path: ":id", name: "User", component: User }] } ] }); Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App) }).$mount("#app");HolaMundo.vue
<template> <div> <div v-for="item in items" :key="item.id"> <b> id: {{ item.id }}</b> <router-link :to="`/HelloWorld/${item.id}`"> {{ item.title }} </router-link> </div> <!-- end v-for --> <router-view></router-view> </div> </template> <script> import { router } from "./router"; export default { name: "HelloWorld", components: {}, data() { return { items: [], }; }, mounted() { router().then((r) => { this.items = r.data; }); }, }; </script>códigos y caja: - https://codesandbox.io/s/combined-logic-api-forked-oq808t?file=/src/main.js
en el archivo de enrutamiento main.js, si cambio de la ruta: '/' a la ruta: '/ HelloWorld', entonces la salida no se muestra. No estoy seguro de por qué y dónde está vinculado con la llamada api.
La razón por la que cambié de la ruta: '/' a la ruta: '/HelloWorld' porque la ruta: '/' en mi proyecto, se considerará como página de inicio de sesión. Así que intenté cambiar pero obtener una pantalla en blanco.
deberías cambiar
const router = new VueRouter({ routes: [ { path: "/HelloWorld/", name: "HelloWorld", component: HelloWorld, children: [{ path: ":id", name: "User", component: User }] } ] });a
const router = new VueRouter({ mode: 'history', routes: [ { path: "/HelloWorld/", name: "HelloWorld", component: HelloWorld, children: [{ path: ":id", name: "User", component: User }] } ] }); (Entonces, agregue mode: history, al router ).
Más sobre el mode: history en Vue Router v3 aquí