我的应用程序带有一个按钮,我想更改为另一个Vue文件。我的第一个Vue文件称为app.vue。
<template>
<div id="app">
<button id="gettingStarted">Getting started</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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;
}
#gettingStarted {
font-family: Avenir, Helvetica, Arial, sans-serif;
background:cornflowerblue;
border-radius: 0.5rem;
height: 2.5rem;
width: 6%;
}
</style>
然后我有另一个名为Gallery.vue的文件
<template>
<div id="app">
<h4>25%</h4>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>
因此,在按钮上单击in-app.vue我要转到gallery.vue。我目前正在为此项目使用Vue3。
您可以随时使用Vue路由器。
本教程将比我更好地解释:
https://appdividend.com/2018/12/28/vue-router-tutorial-with-example-how-to-use-routing-in-vuejs
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句