Currently, I am working on setting up a single-page Vue application that utilizes Vuetify and the Vue Router.
It seems like my routes are properly configured as:
- I can see them in the Vue tools, under both history and routes
- The URL and parameters update correctly in the address bar
However, despite all this, the component linked to the route does not show up. It just remains on the home page component without any console errors appearing.
I suspect there might be some confusion in how my main app.js file is structured. As someone who is fairly new to Vue, I may not fully understand how everything interacts. I've tried adjusting where I import things, renaming routes, even removing Vuetify, but I still cannot get the component to switch along with the route.
app.js
import Vue from 'vue'
import vuetify from './plugins/vuetify'
import router from "./router";
import myDefaultView from './Views/myDefaultView'
Vue.component('myDefaultView', myDefaultView)
Vue.config.productionTip = false
//I have a hunch something might be off in this section
new Vue({
router,
vuetify,
render: h => h(myDefaultView)
}).$mount('#app')
router.js
import Vue from "vue";
import Router from "vue-router";
import myDefaultView from './Views/myDefaultView'
import userPage from "./Views/userPage";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "home",
component: myDefaultView
},
{
path: "/user/:userId",
name: "userPage",
component: userPage
},
]
});
myDefaultView.vue
//relevant code snippets only
<template>
<v-main>
<template>
<v-data-table
@click:row="goToUserPage"
:headers="headers"
:items="users"
:items-per-page="15"
class="elevation-1"
>
</v-data-table>
</template>
</template>
<script>
import axios from 'axios';
import router from "../router";
export default {
props: {
source: String,
},
data () {
return {
users: [],
headers: [
{
text: 'User Name',
align: 'left',
sortable: true,
value: 'user.name',
class: 'text-subtitle-1'
},
{ text: 'Date joined', value: 'user.joined'},
{ text: 'Points ', value: 'user.points' },
],
}
},
created () {
this.$vuetify.theme.dark = true
},
mounted () {
this.getUsers();
},
methods: {
getUsers() {
axios.get("http://local.getusers.com)
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error)
})
},
goToUserPage(item,row) {
router.push({ name: 'userPage', params: { userId: row.item.user.id } })
}
}
}
</script>
userPage.vue
<template>
<span>This vue is arbitrary, if I could just get it to display I could make it more cool</span>
</template>
<script>
export default {
name: "userPage"
}
</script>
<style scoped>
</style>