- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
<template>
<div>
Hi. Make me awesome.
<p>
All my information (price, masthead image, expiration date, etc) is in <br>
<a v-bind:href="`https://www.rosettastone.com/lp/globals/models/${modelName}.js`">
https://www.rosettastone.com/lp/globals/models/{{modelName}}.js
</a>
</p>
</div>
</template>
<script>
export default {
/*
* Sets <head> information for this page.
* Metadata, scripts, css, title, etc, can
* all be set and fetched here
*/
head ()
{
return {
title: 'Rosetta Stone - Learn a New Language',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Rosetta Stone' }
],
script: [
{ src: `https://www.rosettastone.com/lp/globals/models/${this.modelName}.js` }
]
}
},
/*
* Here we use the server to parse the URL and see which
* model it should fetch (ie, `sitewide', 'sale', etc).
* Once we know, we set the state variable `modelName`
* to that value.
* This is needed for the head() method above to fetch
* the right `model.js` file. This method and the
* head() method above is done in the server (while nuxt is generating)
* so when the client loads, the head() will fetch the right script tag
*/
async asyncData ({ params, route })
{
return { modelName: route.params.page }
},
/* Page state data */
data()
{
return {
model : null,
modelName: null,
filter: ['01', "08", '18', '24D', "03F03", "06F06" ], // Products we don't want to show,
}
},
}
</script>