I'm tring to redirect from my Login Template

<template>
  <formulario-login/>
</template>

<script>
import formularioLogin from "@/components/formularioLogin";

export default {
  name: "index",
  components: {
    formularioLogin
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

<template>
  <div >
      Login
      <input type="text" v-model="usuario.login">
      <br/>
      Senha
      <input type="password" v-model="usuario.password">
      <br/>
      <button @click="logar"> Login</button>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "barraInicial",
  data: () => {
    return {
      usuario: {
        login: undefined,
        password: undefined
      }
    }
  },
  methods: {
    async logar() {
      let formData = new FormData();
      formData.append("user", this.usuario)
      await axios.post('http://localhost:8080/login', this.usuario)
          .then(res => {
            if(res.data === true){
              this.$router.push('/App')
            }
          })
          .catch(res => console.log(res))
    }
  }
}
</script>

<style scoped>
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
</style>

To my App Template

<template>
  <div >
    <div >
      <label>Select file
        <input type="text" v-model="nome"/>
        <input type="file" id="file" v-on:change="handleFileUpload"/>
      </label>
      <button v-on:click="submitFile">Send</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  components: {
  },
  data: () => ({
    file: '',
    nome: ''
  }),
  methods: {
    handleFileUpload( event ){
      this.file = event.target.files[0];
    },
    async submitFile(){
      let formData = new FormData();
      formData.append("image", this.file, this.file.name);
      formData.append("nome", this.nome)
      await axios.post( 'http://localhost:8080/image.do',
          formData,

      )
    },
  }
}
</script>

<style>
*{
}
</style>

I've added a Vue-Router into my project and my main.js

import { h } from 'vue'
import App from './App.vue'
import Index from './Index.vue'
import * as VueRouter from 'vue-router'
import * as Vue from 'vue'

const routes = [
    {path: '/', component: Index, name: 'index'},
    {path: '/App', component: App, name: 'program'},
]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes,
})

const app = Vue.createApp({
    render: ()=>h(Index)
})
app.use(router)
app.mount('#app')

I've created a Vue 3 project, and i'm trying to redirect from my Template Login to my App Template, i added Vue-Router into my project and created path's to my templates, but when my front-end receive a boolean true from my back-end, they step into if condition, the URL change, but template don't, the console don't show nothing too

CodePudding user response：

Since you not including Index.vue file, I think you forgot the <router-view/>

Reference

// Index.vue
<template>
  <router-view />
</template>

<script>
export default {
  name: "Index",
}
</script>