As part of my learning process, I am in the midst of creating my own website. My goal is to enhance user experience by enabling them to click on a button and seamlessly transition from one page to another.
In my quest for knowledge, I have scoured the internet and experimented with various suggestions on how to create and link the button.
My current project involves three key files:
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>
Despite using http://localhost:8080/ as my base URL, clicking the button redirects me to http://localhost:8080/Res.vue without changing the content. I suspect I may have overlooked a certain function call in App.vue or a crucial detail in main.js.