Using Vueitify and router How do I make vue router change components? URL is updating but component is not

Question

I am working on getting a single page vue application working that uses vuetify and the vue router.

Everything is pointing to my routes being recognized:

1. They show up in vue tools properly, in both history and routes
2. The url and parameter are changing properly in the address bar

However, my component associated with the route is not displaying. It simply stays on my home page component. I am getting no console errors.

I feel this might be some kind of confusion in how my main app.js file is setup. I am extremely new to Vue and may not be grasping how everything works together. I have tried importing things in different places, changing route names, removing vuetify but ultimately I can't get the component to change 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

//thinking something in this bit might not be right
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

//only relevant code included
<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>

Answer 1

The way route works in Vue is: you have an app component which contains a <router-view>. This tag will be replaced by the component the current route resolves to.

If you have anything else you want displayed all the time (a sidebar, a menu or a footer) (regardless of current route), also place them in app component.
Placing them in the app doesn't mean they can't react to route changes. It only means they won't be re-rendered when route changes, which is good, as you might want to transition them nicely from a state to another.

Put anything you want re-rendered (or not rendered) on route change inside the components that are resolved by router.

As a side note, creating a new Vue project using @vue/cli's create command will create a basic, yet complete working router (if you select the router option from the create script questions).
Also note you can have more <router-view> tags in each route, to display sub-pages of a page.

Docs here.