Vue-storefront: Routing not working properly with cmsData component

[vishal-7037]

Routing is not working properly with cmsData component.

I've configured the Snowdog CMS API module in Magento and got CMS pages as response successfully at Vue Storefront.

But, When I clicked on the CMS page link from another CMS page, It will not fetch CMS page content.

For example, When I clicked a first time on About Us link it will get whole page content from Magento and render it and then I clicked on another page from here. it will not be working.

I've set the router and its link as below:

Path: router/index.js

{ name: 'about-us', path: '/about-us', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} },
{ name: 'terms-conditions', path: '/terms-conditions', component: CmsData, props: {identifier: 'terms-conditions', type: 'Page', sync: true} },
{ name: 'privacy-policy', path: '/privacy-policy', component: CmsData, props: {identifier: 'privacy-policy', type: 'Page', sync: true} },
{ name: 'delivery-and-return-policy', path: '/delivery-and-return-policy', component: CmsData, props: {identifier: 'delivery-and-return-policy', type: 'Page', sync: true} }

Path: src/themes/default/components/core/blocks/Footer/Footer.vue

<router-link :to="localizedRoute('/about-us')" exact>
  {{ $t('About Us') }}
</router-link>
<router-link :to="localizedRoute('/terms-conditions')" exact>
  {{ $t('Terms & Conditions') }}
</router-link>
<router-link :to="localizedRoute('/privacy-policy')" exact>
  {{ $t('Privacy Policy') }}
</router-link>
<router-link :to="localizedRoute('/delivery-and-return-policy')" exact>
  {{ $t('Delivery and Return Policy') }}
</router-link>

Current behavior

When I click first time on a link it will fetch content properly from Magento and render it but when click on another link from here, it will not work.

Expected behavior

It should be fetched page content for each link from Magento even clicked on another link from anywhere.

Can you handle fixing this bug by yourself?

• [ ] YES
• [X] NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [ ] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [x] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser: Chrome
• OS: Ubuntu 16.04
• Node: v10.15.3
• Code Version:

[pkarw]

Hi there! I think it's related to: https://github.com/DivanteLtd/vue-storefront/issues/2499

Could You fix that one? It's just about commenting this condition :)

[vishal-7037]

Hi @pkarw,

I've tried by commenting that line, but it won't work. :(

[pkarw]

OK, the reason is You're using outdated CMS module. Please try the recommended one -> the CmsPage (the default routing is like: { name: 'cms-page', path: '/i/:slug', component: CmsPage })

[pkarw]

More on the CMS before and after VS 1.6: https://docs.vuestorefront.io/guide/data/static-data.html

[vishal-7037]

@pkarw ,
Thank you. :+1:
It works now :)