vue router on my code not show result from component-CodePudding

when I use browser go to http://localhost:8080/samuifight it change url to http://localhost:8080/SamuiFight I expect it show "Hi SamuiFight" but it show "Hello app.vue "

main.js

import App from "./App.vue";
import { createRouter, createWebHistory } from 'vue-router';
import SamuiFight from './components/boxing/SamuiFight.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
       { path: '/samuifight', component: SamuiFight } // our-domain.com/teams => TeamsList
   
    ]   
  });
  
  const app = createApp(App)

  app.use(router);
  
  app.mount('#app'); ```


App.vue

``` <template>
  
     <h3>Hello app.vue</h3>
    
  </template>

SamuiFight.vue

      <h3>Hi SamuiFight</h3>      
  </template>

CodePudding user response：

you need to put router view then vue-router will inject the component there according to the active route.

<template>
     <h3>Hello app.vue</h3>
     <router-view></router-view>
 </template>