如何使用 Vue.js 中的路由器概念通过单击按钮简单地从一个组件（主页）导航到另一组件

Question

我了解 html、css 和 js 的基础知识。我刚开始学习Vue.js。我的 Vue JS 应用程序中有一个主页，它有两个按钮。单击该按钮，导航应该发生。（要加载的新组件）。但是，在当前代码中，单击按钮时，导航不会发生。请协助。如下所示复制几个文件。

App.vue

<template>
  
<h3> Home  </h3> 
<button @click="goToCreate()"> Create Package  </button>
<br><br>
<button @click="goToEdit()"> Update Package  </button>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
   methods:{
   goToCreate(){
        this.$router.push('/createpackage'); 
    },
  goToEdit(){
        this.$router.push('/updatepackage'); 
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import CreatePackage from './components/CreatePackage.vue'
import SearchAndUpdatePackage from './components/SearchAndUpdatePackage.vue'
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
        path : '/createpackage',
        component:CreatePackage
    },{
        path : '/updatepackage',
        component:SearchAndUpdatePackage
    }

]
})

const app= createApp(App);
app.use(router).mount('#app')

config.js

let baseUrl = ''
if (process.env.NODE_ENV === 'production') {
   baseUrl = 'http://yourdomain.com/api/'
}
else {
   baseUrl = 'http://localhost:9000/'
}
export const apiHost = baseUrl

CreatePackage.vue

<template>
    
<div>
    <form name="createPackageForm" @submit="submitNewPackage" method="post">
        <input type="number" name="noOfPostpaid" placeholder="PostPaid" v-model="posts.noOfPostpaid"> 
        <br>  <br>   <br>
        <input type="number" name="noOfPrepaid"  placeholder="PrePaid" v-model="posts.noOfPrepaid"> 
          <br>  <br>  <br>
          <button>Submit</button>

</form>
</div>

</template>

<script>



    import { apiHost } from '../config'
    import axios from 'axios'
    
    export default {
        name:"CreatePackage",
        data(){
            return{
                posts: {
                    noOfPostpaid:null,
                   noOfPrepaid:null
                }
                
            }
        },
        methods:{
            submitNewPackage(e){
              
                console.warn(apiHost+'tdg/createpackage/'+this.posts.noOfPostpaid+'/'+this.posts.noOfPrepaid);
                e.preventDefault();
                  
                axios.post(apiHost+'tdg/createpackage/'+this.posts.noOfPostpaid+'/'+this.posts.noOfPrepaid,{
                  headers: {
                      "Access-Control-Allow-Origin": "*"
                      }},null).then(
                  response => {
                console.log(response.data)}
                ).catch(e => {
                    console.log(e); 
                    })
                this.posts.noOfPostpaid='';
                this.posts.noOfPrepaid='';
    
             }
        }
    }
    
    </script>

SearchAndUpdatePackage.vue

<template>


<div>
    
        <input type="search" name="accountUUID" placeholder="Account UUID" v-model="posts.accountUUID"> 
        <br>  <br>   <br>
          <button  @click="searchAccountUUID">Search </button>

          <br>  <br>   <br>

 
 <textarea id="myTextArea" cols=100 rows=20 v-model="posts.responseJSON"></textarea>


   
</div>

</template>

<script>

import { apiHost } from '../config'


export default {
     name:"SearchAndUpdatePackage",
    data(){
        return{
            posts: {
                  accountUUID:null,
                 responseJSON:null
            },
           
            
        }
    },
      methods:{
        searchAccountUUID(e){
          
            const url=apiHost+'tdg/carbon/'+this.posts.accountUUID;
            console.log(url);
            e.preventDefault();
              
           fetch(url).then(response => response.json())
           .then(data=>this.posts.responseJSON=JSON.stringify(data,null,4))
             .catch(e => {
                console.log(e); 
                })
            
          console.log(this.posts.responseJSON);
      
         }
    }
}
</script>

Answer 1

使用Vue-Router，你需要使用router-view组件。当您导航到 routes 配置中定义的 URL 时，Vue-Router 将匹配该 URL 并显示关联的组件。

一般放在App.vue:

<template>
  <h3> Home </h3> 
  <button @click="goToCreate()"> Create Package  </button>
  <br><br>
  <button @click="goToEdit()"> Update Package  </button>
  <router-view />
</template>

<script>
export default {
  name: 'App',
  methods: {
    goToCreate() {
      this.$router.push('/createpackage'); 
    },
    goToEdit() {
      this.$router.push('/updatepackage'); 
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

您可能对它是 <template> 的直接后代有疑问，但我不确定。

如何使用 Vue.js 中的路由器概念通过单击按钮简单地从一个组件（主页）导航到另一组件

How to simply navigate from One Component (Home Page ) to Another Component by clicking button using Router concept in Vue.js

vue.js

vue-router

vue-component

vuejs3