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
Related
I have a project on Vue.js, and there is some issue with production mode and vue router. On development version I have no issues, but if I compile it and run on production mode, and go to some link - it show me 404 error code
Here is my route js file:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: 'Agents',
component: Agents
},
{
path: '/agents',
name: 'Agents',
component: Agents
},
{
path: '/compare-agents',
name: 'Compare',
component: Compare
},
{
path: '/input',
name: 'InputFields',
component: InputFields
},
{
path: '/check-pay',
name: 'CheckPay',
component: CheckPay
},
{
path: '/success',
name: 'Success',
component: Success
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
For example, I wanna go to Agents page, by link like http::/localhost:8080/agents and it's works (dev verison), but if I compile, it's getting 404 error
Website is localted in core directory.
I can visit homepage, use nginx server, and here it's conf file:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html
include /etc/nginx/mime.types;
location / {
try_files $uri $uri/ /index.html;
}
}
}
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'
})
I want to have dynamic routing in my angular app. All my modules are lazy loaded. I resolved this problem with adding my route as child for all routes, but is little tricky. Maybe is the best way to do it, more Angular way.
Angular 7.2.0
const routes: Routes = [
{
path: '',
loadChildren: './dashboard/dashboard.module#DashboardModule'
}, {
path: 'event',
loadChildren: './event/event.module#EventModule'
}, {
path: 'account',
loadChildren: './account/account.module#AccountModule'
}, {
path: 'settings',
loadChildren: './settings/settings.module#SettingsModule'
}
];
My goal is to have route, for example: '/create' which I could add at the end of all routes.
/create
/event/create
/account/main/create
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'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