javascript - 制作一个按钮链接到我也创建的另一个页面

Question

我正在创建一个网站供我自己学习。我试图让用户单击按钮并从一个页面移动到另一页面。

我一直在网上查找并尝试了一些关于如何创建和链接按钮的不同建议。

目前我正在处理三个文件:

main.js:

import '@/assets/css/tailwind.css'
import Vue from 'vue'
import App from './App.vue'
import Results from './Results.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Res.vue:

<template>
...
</template>

<script>
import Vue from "vue";
import { print } from "util";

export default Vue.extend({...});

</script>

<style>
...
</style>

应用程序.vue:

<template>
...
<div class='button'>
      <a href='./Results.vue'>
        <v-btn small color="blue">Click here to get results</v-btn>
      </a>
</div>
</template>

<script>
import Vue from "vue";
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import { print } from "util";

Vue.use(Vuetify)
... (button stuff is not referenced again)
</script>

<style>
... (not button stuff here)
</style>

我正在使用http://localhost:8080/当我单击按钮时，它会转到 http://localhost:8080/Res.vue但仍然加载相同的页面。我怀疑我忘记了 App.vue 中的调用或 main.js 中的某些内容

Answer 1

将路由添加到您的项目

// routes example
[
  { path: '/', component: Main }, // some main component here
  { path: '/results', component: Res } // your Res component
]

勿忘过去<router-view /'>进入App.vue

使用to属性来创建链接按钮(您不需要外部“a”标签)

<v-btn to='/results' small color="blue">Click here to get results</v-btn>

或者:to='{name: 'results'}'如果您命名了路线。

<v-btn :to='{name: "results"}' small color="blue">Click here to get results</v-btn>