Check out my component:
const Vue = require("vue/dist/vue.js");
const qs = require("querystring");
module.exports = Vue.component("Page",function(resolve){
console.log(pageRoute);
let id = pageRoute.params.id;
fetch("/getPage.json",{
method:"POST",
body:qs.stringify({
id
})
}).then(response=>response.json())
.then(data=>{
console.log(data);
resolve({
template:`<h1>`+JSON.stringify(data)+"</h1>"
});
})
});Now take a look at my router:
const router = new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Home
},
{
path:"/me",
component:Me
},
{
path:"/create-page",
component:createPage
},
{
path:"/p/:id",
component:Page
}
]
});
Vue.use(VueRouter);But when I try to run this app, an error occurs:
ReferenceError: $route is not definedI attempted using this.$route but it doesn't seem to work. I typically use arrow functions, but in this case, the following code works:
const Vue = require("vue/dist/vue.js");
module.exports = Vue.component("Page",function(resolve){
resolve({
template:`<h1>{{$route.params.id}}`
});
});If you have any suggestions on how to solve this issue, please let me know. Thank you!