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>

App.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>

将按钮链接到我也创建的另一个页面

1 个答案: