I have been working on a web application using vue.js for my frontend. I have set up my router, but for some reason, the pages are not rendering. I have double-checked everything and there are no errors in my code. Here is a snippet of what I have:
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home'
import Table from './components/Table'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path: '/table',
component: Table
},
],
linkActiveClass: "active",
mode: "hash"
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
For example, here is Home.vue
<template>
<div class="flex flex-wrap -m-3">
<h1>You're looking at your home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {}
}
};
</script>
If anyone can provide some guidance or assistance, it would be much appreciated.