I'm trying to create a custom route in Nuxt with the following nuxt.config.js:
router: {
base: '/',
router: {
extendRoutes (routes, resolve) {
routes.push({
name: 'custom',
path: 'here-i-am',
component: resolve(__dirname, 'pages/Slug.vue')
})
}
}
},
Though, when I visit localhost:3000/here-i-am - it is throwing: This page cannot be found. I have created Slug.vue under the /pages directory.
Am I missing something else? I have tried to rerun the compiler.
Two issues:
You currently have extendRoutes under a nested router property, which doesn't exist. Move it to the top-level router prop:
router: {
//router: { // DON'T DO THIS
// extendRoutes() {...}
//},
extendRoutes() {...}
}
The path property must start with a leading slash for non-nested routes:
routes.push({
// path: 'here-i-am' // DON'T DO THIS
path: '/here-i-am'
})
Related
I have a vue.js project where I play audio files that are stored in my public folder:
Previously, I was able to access and play these files as such:
path = 'recordings/Behar/weekday/1.mp3'
this.audio = new Audio(path);
this.audio.play()
But after adding the vue-router in main.js:
const routes = [
{ path: '/', component: Controller },
{ path: '/date/:date', component: Controller },
{ path: '/date/:date/aliyah/:aliyah', component: Controller },
{ path: '/date/:date/aliyah/:aliyah/verse/:verse', component: Controller },
]
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
})
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
When I try to play these recordings I see this message:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
I believe that somehow adding the vue-router has screwed up with my access to the public folder.
Why am I no longer able to access the public folder and how (and if at all) has vue-router changed that?
With the routing, I found that to access the publicPath I need to append a '/' in front of my path:
path = '/recordings/Behar/weekday/1.mp3'
I am trying to change/update the router query on click event in my navigation. But no matter what I do, the click event don't change the query in URL.
But in the vue in-component guard "beforeRouteUpdate" I get the new parameters if I console.log(to.query.scrollto);
Maybe someone have an idea or a better solution how I can fix this?
This is my intention:
myhomepage.de/?scrollto=about
myhomepage.de/?scrollto=contact
myhomepage.de/otherpage/?scrollto=about
myhomepage.de/anotherpage/?scrollto=service
...
These are my settings:
Router settings:
export default new Router({
mode: 'history',
base: __dirname,
routes: [
{
path: '/',
name: 'home',
component: Page
},
{
path: '*',
component: NotFound
}]
})
My navigation links:
a(href="" #click.prevent="updateNav(item.key)") {{item.title}}
In my methods:
updateNav(query) {
var data = Object.assign({}, this.$route.query);
data['scrollto'] = query;
this.$router.push({name: 'home', query : data });
...
}
I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/
Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 404.
Here is my router:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ContentView,
children: [
{
path: '/',
name: 'DataTable',
component: DataTable,
meta: { requiresAuth: true }
},
// ===================================
// Login
// ===================================
{
path: '/login',
name: 'AppLogin',
component: AppLogin,
meta: { checkAlreadyLoggedIn: true }
},
{
path: '/logout',
name: 'AppLogout',
component: AppLogout,
meta: { requiresAuth: true }
}
]
},
{
path: '*',
component: ContentView,
children: [
{
path: '/',
name: 'NotFound',
component: NotFound
}
]
}
]})
And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'
In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.
The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.
See docs: https://router.vuejs.org/en/api/options.html#base
I have been able to solve this, using the base property of vue-route.
In the case of the example it would look like this:
export default new Router({
mode: 'history',
base: '/subdir/app/',
routes: [
{
path: '/',
component: ContentView,
children: [
My question now is how can I make this subdirectory dynamically.
Imagine a single server, and 2 different urls pointing to this server.
www.dominio / app1
www.dominio / app2
I'm fairly new to vue.js and I'm currently trying to setup my different routes. I'm using sub routes, since the "logged in" user will have a different UI than a visitor.
Currently my setup is like this:
routes: [
{
path: '/auth',
name: 'auth',
component: test,
meta: {
auth: false
},
children: [
{
path: 'login',
name: 'login',
component: login
},
{
path: 'signup',
name: 'signup',
component: signup
}
]
},
{
path: '/user',
name: 'user',
component: test,
meta: {
auth: true
},
children: [
{
path: 'profile',
name: 'profile',
component: login
}
]
}
]
While this is working, I'm wondering why child routes don't take over the parents meta properties. Do I need to assign the meta.auth to each sub route? Or is there any way to inherit this?
Essentially in the router.beforeEach, I want to check if the user is authenticated correctly or not. But only on child routes of /user
I'm also coming from an angular background, so I'm used to nesting routes, not sure if this is the best way in Vue.
To answer my own question: https://github.com/vuejs/vue-router/issues/704
I didn't realise this was deprecated in Vue-router 2.0, it is possible to get the matched route and find the meta there.
With vue-router v.3 to match parent's meta (for example: in beforeEach() func. ) You need to use to.matched.some() like this:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.auth)) {
// ...
next({name:'route-name'})
} else {
next()
}
}
https://router.vuejs.org/guide/advanced/meta.html
I have an app that's based of http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/ article. I've added some children routes and now my router config is as such:
function errorLoading(err) {
console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
console.log('load route called');
return (module) => cb(null, module.default);
}
const obj = {
component: App,
childRoutes: [
{
path: '/',
getComponent(location, cb) {
System.import('pages/Home')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '/gsgs',
getComponent(location, cb) {
System.import('pages/Gsgs')
.then(loadRoute(cb))
.catch(errorLoading);
},
childRoutes: [
{
path: 'go',
getComponent(location, cb) {
System.import('pages/Gsgs/Home.js')
.then(loadRoute(cb))
.catch(errorLoading);
},
}
]
},
{
path: '/about',
getComponent(location, cb) {
System.import('pages/About')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
]
};
/index, /about and /gsgs routes trigger dynamic code loading just fine. But /gsgs/go triggers a 404 with
bundle.js:2 Dynamic page loading failed Error: Loading chunk 0
failed.(…)
What am I doing wrong? Im using
"webpack": "^2.1.0-beta.4",
"webpack-dev-server": "^2.0.0-beta"
I have tried to reproduce the issue on the blog post and seems something is wrong. I have tried to fix that and I am not able to see that error any more.
You can refer to this commit which has changes against the current master and I am able to load child route dynamically.
Let me know if you face issues again. It would be great if you can have sample repo which can reproduce the issue, I will be glad to debug.
Happy to Help.
Check your config file, (in my case webpack.config.dev.js file) and check publicPath and set it to '/'. Ex : publicPath: '/' .
You need to set it in output like this
output: {
path: __dirname,
filename: 'app.js',
publicPath: '/',
/*publicPath: 'http://0.0.0.0:8000/',*/
}
I was getting this error
`http://0.0.0.0:8000/0.app.js
Error: "Loading chunk 0 failed."`
and it resolved by changing publicPath: 'http://0.0.0.0:8000/' To publicPath: '/'.