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

Posted 2023-02-23

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

【英文标题】：How to simply navigate from One Component (Home Page ) to Another Component by clicking button using Router concept in Vue.js

【发布时间】：2021-08-02 06:18:23

【问题描述】：

我了解 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>

【问题讨论】：

您是否在任何地方使用router-view？

试试goToEdit而不是goToEdit()

@MichaelMano，我尝试使用 goToEdit 。它不工作。

@Daniel_Knights，我没有使用路由器视图。请告诉我解决方案。

【参考方案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> 的直接后代，但我不确定。

【讨论】：

单击按钮后，组件仅在按钮下方呈现。我希望单独的组件应该显示在整个页面中。 @Daniel_Knights

我正在构建一个多页应用程序。因此，它只是一个具有主页的 UI，其中包含许多按钮点击导航到不同的组件以测试后端 API（使用表单）。没有登录功能。只需要实现上述评论。请协助。谢谢

您必须隐藏导航上的按钮或将按钮放在自己的组件中，这是另一条路线

这两种方式不满足要求。我想知道为什么在 Vue JS 中通过简单的按钮单击加载新页面看起来很难。

抱歉，我不确定我是否理解您的需求