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
/pagesand:pageSlugif that helpspath: '/:pageSlug'?'$route.params.pageSlug': 'getPageData'but it doesn't make any difference.{ path: '/pages', name: 'pages', redirect: 'pages/home', component: Pages, meta: {auth: true}, children: [ { path: '/:pageSlug', //<- [1] name: 'page', component: Page, }, ] }Is [1] the change we are talking about?