Vue.js 2 router only loading component from navigation and not from URL

Question

When clicking to view page content from the menu the correct component loads. However, when I go it directly from the URL it doesn't.

This is the master page (which loads the menu):

<template>
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <router-link to="/new-page" type="button" class="btn btn-primary btn-lg btn-block">New page</router-link>
            <div class="list-group sidebar">
                <router-link v-for="page in pages" class="list-group-item" :to="'/pages/' + page.slug">{{ page.menu_title }}</router-link>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            pages() {
                return this.$store.state.pages
            }
        },
        created() {
            this.$http.get('pages').then((response) => {
                this.$store.commit('setPages', response.body)
                console.log(response)
            }, (response) => {
                console.log("Error: " + response)
            })
        }
    }
</script>

This is the content which loads a content type depending what page type is clicked. You can use multiple templates which reloads with different data (that part is OK)

<template>
    <div>
        <div class="loader" v-if="loading">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
        <div v-if="!loading">
            <vc-gig :content="content" v-if="content.type == 'gig'"></vc-gig>
            <vc-news :content="content" v-if="content.type == 'news'"></vc-news>
            <vc-home :content="content" v-if="content.type == 'home'"></vc-home>
            <vc-image :content="content" v-if="content.type == 'image'"></vc-image>
        </div>
    </div>
</template>

<script>
    import Gig from '../Gig.vue'
    import News from '../News.vue'
    import Home from '../Home.vue'

    export default {
        components: {
            'vc-gig': Gig,
            'vc-news': News,
            'vc-home': Home,
        },
        data() {
            return {
                loading: true,
                content: [],
            }
        },
        created() {
            this.getPageData
        },
        watch: {
            '$route': 'getPageData'
        },
        methods: {
            getPageData() {
                this.loading = true

                this.$http.get('pages/' + this.$route.params.pageSlug).then((response) => {
                    this.content = response.body
                    this.loading = false
                    console.log(response.body)
                }, (response) => {
                    console.log(response)
                })
            }
        }
    }
</script>

All components load correctly when clicking the menu (in the first code section) but if I add the URL manually in the browser the page content (second code section) wont load.

Update: Here is my full routes.js file:

import Vue from 'vue'
import VueRouter from 'vue-router'

// Public
import Home from './views/Pages/Home.vue'

// Authentication
import Login from './views/Auth/Login.vue'
import Register from './views/Auth/Register.vue'
import Onboarding from './views/Auth/Onboarding.vue'
import ResetPassword from './views/Auth/ResetPassword.vue'

// Pages & Items
import Pages from './views/Pages/Layout/PageMaster.vue'
import Page from './views/Pages/Layout/PageSinge.vue'
import Item from './views/Pages/Layout/PageItem.vue'
import NewPage from './views/Pages/NewPage.vue'

// Options
import Options from './views/Options/Layout/OptionsMaster.vue'
import Themes from './views/Options/Themes.vue'
import Logo from './views/Options/Logo.vue'
import SocialMediaIcons from './views/Options/SocialMediaIcons.vue'
import WebsiteTitle from './views/Options/WebsiteTitle.vue'
import DomainName from './views/Options/DomainName.vue'
import Meta from './views/Options/Meta.vue'
import AnalyticsWebtools from './views/Options/AnalyticsWebtools.vue'

// My Account
import Account from './views/Account/Layout/AccountMaster.vue'
import Billing from './views/Account/Billing.vue'
import Details from './views/Account/Details.vue'
import Password from './views/Account/Password.vue'

Vue.use(VueRouter)

const Router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {guest: true}
        },
        {
            path: '/register',
            name: 'register',
            component: Register,
            meta: {guest: true}
        },
        {
            path: '/reset-password',
            name: 'reset-password',
            component: ResetPassword,
            meta: {guest: true}
        },
        {
            path: '/onboarding',
            name: 'onboarding',
            component: Onboarding
        },
        {
            path: '/',
            name: 'home',
            redirect: 'pages/home',
            component: Home,
            meta: {auth: true}
        },
        {
            path: '/new-page',
            name: 'newpage',
            component: NewPage,
            meta: {auth: true}
        },
        {
            path: '/pages',
            name: 'pages',
            redirect: 'pages/home',
            component: Pages,
            meta: {auth: true},
            children: [
                {
                    path: ':pageSlug',
                    name: 'page',
                    component: Page,
                },
            ]
        },
        {
            path: '/pages/:pageSlug/:itemSlug',
            name: 'item',
            component: Item,
            meta: {auth: true}
        },
        {
            path: '/options',
            name: 'options',
            redirect: 'options/themes',
            component: Options,
            meta: {auth: true},
            children: [
                {
                    path: 'themes',
                    name: 'themes',
                    component: Themes
                },
                {
                    path: 'logo',
                    name: 'logo',
                    component: Logo
                },
                {
                    path: 'social-media-icons',
                    name: 'socialmediaicons',
                    component: SocialMediaIcons
                },
                {
                    path: 'website-title',
                    name: 'sitetitle',
                    component: WebsiteTitle
                },
                {
                    path: 'domain-name',
                    name: 'domain',
                    component: DomainName
                },
                {
                    path: 'meta-text-image',
                    name: 'meta',
                    component: Meta
                },
                {
                    path: 'analytics-webtools',
                    name: 'tools',
                    component: AnalyticsWebtools
                },
            ]
        },
        {
            path: '/account',
            name: 'account',
            component: Account,
            meta: {auth: true},
            children: [
                {
                    path: 'billing',
                    name: 'billing',
                    component: Billing
                },
                {
                    path: 'details',
                    name: 'details',
                    component: Details
                },
                {
                    path: 'password',
                    name: 'password',
                    component: Password
                },
            ]
        }
    ]
})

Router.beforeEach(function (to, from, next) {

    // User is authenticated
    if (to.matched.some(function (record) {
            return record.meta.guest
        }) && Vue.auth.loggedIn()) {
        next({
            path: '/pages'
        })
    } else {
        next()
    }

    // User not authenticated
    if (to.matched.some(function (record) {
            return record.meta.auth
        }) && !Vue.auth.loggedIn()) {
        next({
            path: '/login'
        })
    } else {
        next()
    }
})

export default Router

Answer 1

Simple fix, you are not calling the method you created.

created() {
     this.getPageData
},

should be

created() {
  this.getPageData()
},

Also perhaps using a linter such as eslint would help avoid these mistakes.

http://eslint.org/

Happy coding!