After searching through several posts on Stackoverflow about issues with routes not functioning properly, I have yet to find a solution for why my routes are not working.
This is how my router looks:
import Vue from 'vue'
import Router from 'vue-router'
import Foo from '@/components/Forms/foo'
import Bar from '@/components/Forms/bar'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
})
Here is the foo component:
<template id="foo">
<form name="basic-form" v-on:submit="submit">
<fieldset>
<legend>User</legend>
<ul>
<li>
<label>First Name</label>
<input v-model="firstName" name="first-name" />
</li>
</ul>
</fieldset>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
name: 'foo',
data: function () {
return {
firstName
}
},
methods: {
submit: function (event) {
event.preventDefault()
console.log(this.$data.firstName)
}
}
}
</script>
And here is the bar component:
<template id="createDb">
<button v-on:click="createDb">Create Database</button>
</template>
<script>
export default {
name: 'CreateDb'
}
</script>
It's important to mention that each of these components functions individually when set as the root /. In other words, regardless of what path is entered, it redirects to the root and utilizes any component linked to the root. I am puzzled as to why this behavior is occurring.