Javascript 如何在vue 3中单击按钮打开新页面？

我有一个带有按钮的应用程序，我想更改为另一个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>

开始
导出默认值{
名称：“应用程序”，
组成部分：{
}
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
#开始{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
背景：矢车菊蓝；
边界半径：0.5雷姆；
高度：2.5雷姆；
宽度：6%；
}

然后我有另一个名为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>

25%
导出默认值{
名称：“应用程序”，
组成部分：{
}
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

---

因此，在按钮上单击in-app.vue我想转到gallery.vue。我目前正在使用Vue3进行此项目。

您可以始终使用Vue路由器

本教程将比我更好地解释：

---

基本上，您要做的是渲染不同的组件

<Component1 v-if="useComponent1" />
<Component2 v-if="useComponent2" />

但这很快就会变得有点笨拙（虽然对于一些非常简单的事情可能会有用。所以人们经常做的是“客户端”路由

在Vue3中，您可以使用文档中的简单路由器

或者使用类似VueRouter的东西（这很常见）

入门
...
从“vue路由器”导入{useRouter}
导出默认值{
设置（）{
const router=useRouter（）
常量单击=（）=>{
路由器推送({
路径：“目标路径”
})
}
返回{
点击
}
}
}

这是SPA的一部分吗？我无法使用按钮来更改我的视图。我该怎么做？它不起作用，

@click

对我不起作用。它在控制台中显示我的错误。但是如果我使用

@submit.provent

则它不会显示错误，但不会起作用。

入门

<button id="gettingStarted" @click="click">Getting started</button>
...
import { useRouter } from 'vue-router'
export default {
    setup() {
        const router = useRouter()
        const click = () => {
            router.push({
                path: 'target path'
            })
        }
        return {
            click
        }
    }
}