如何使用 Vue-Router 在 VueJS 中重定向页面

Question

我正在尝试从我的登录模板重定向

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

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

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

  }
}
</script>

<style scoped>

</style>

<template>
  <div class="center">
      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>

到我的应用程序模板

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <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>

我已经在我的项目和我的 main.js

中添加了一个 Vue-Router

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')

我已经创建了一个 Vue 3 项目，我正在尝试从我的模板登录重定向到我的应用程序模板，我将 Vue-Router 添加到我的项目中并创建了我的模板的路径，但是当我的前端 - end 从我的后端收到一个布尔值 true，他们进入 if 条件，URL 发生变化，但模板没有，控制台也没有显示任何内容

Answer 1

因为你没有包含 Index.vue 文件，我想你忘记了 <router-view/>

Reference

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

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

如何使用 Vue-Router 在 VueJS 中重定向页面

How to redirect a page in VueJS with Vue-Router

vue.js

vue-router

vue-component