Vue 3 router не рендерит компонент

Question

Vue 3 router не рендерит компонент

Рейтинг: 1Ответов: 1Опубликовано: 13.05.2023

Пытаюсь сделать простой роутинг в Vue 3. Столкнулся с такой проблемой: при переходе по

<router-link>

соответствующее содержимое компонента не отображается. файл App.vue

<template>
  <div>
    <router-link to="/">Home</router-link>
    <br />
    <router-link to="/test">Test</router-link>
    <router-view />|
  </div>
</template>

файл main.js

import { createApp } from 'vue'
import {createWebHistory} from 'vue-router'
import  VueRouter  from 'vue-router'
import App from './App.vue'
// import HelloWorld from "@/components/HelloWorld";
const Home = { template: '<div>Home</div>' }
const Test = { template: '<div>Test</div>' }

const router = new VueRouter.createRouter(
    {
    history: createWebHistory(),
    routes: [
       {
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        path: '/test',
        name: 'Test',
        component: Test,
      },
    ],
   })

createApp(App).use(router).mount('#app')

hmtl :

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" class="web-camera-container">
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

javascript vue.js vue3 vue-router

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Проблема оказалась достаточно тривиальной: я писал npm install vue-router@4 не в той папке.

Vue 3 router не рендерит компонент

Ответы