Hello,
I am trying to set up a JS route to a custom post type I created.
I created a file in scripts/routes/ called singleCommercialListings.js
Imported it in main.js
...
import singleCommercialListings from './routes/singleCommercialListings';
/** Populate Router instance with DOM routes */
const routes = new Router({
// All pages
common,
// Home page
home,
// About Us page, note the change from about-us to aboutUs.
aboutUs,
// Gallery page
gallery,
// Commercial listings CPT
singleCommercialListings,
});
...
I added the following code inside singleCommercialListings.js
export default {
init() {
// scripts here run on the DOM load event
console.log('This is the single commercial listings page.');
},
finalize() {
// scripts here fire after init() runs
}
};
I read in the documentation that routing is based on the class name in the body so I tried a few variations for the route filename and import name but none worked.
Here are the classes for the body tag on the template page.
commerical_listings-template-default single single-commerical_listings postid-239 unit-130-robinson-crossing app-data index-data singular-data single-data single-commerical_listings-data single-commerical_listings-unit-130-robinson-crossing-data
Does anyone know what I am doing wrong? The class has an underscore in it so maybe I have to add an underscore to the filename or import name?
Any help is much appreciated!
Thank you.
Almost went nuts myself testing your config which should work 
