My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore.
I've tried removing history mode, but this didn't work.
Vue Router
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import axios from 'axios'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/donate',
name: 'donate',
component: () => import('./views/Donate.vue')
},
{
path: '/guildselector',
name: 'guildselector',
meta: {
requiresAuth: true
},
component: () => import('./views/Guildselector.vue')
},
{
path: '/guild/:id',
name: 'guild',
meta: {
requiresAuth: true,
requiresAdmin: true
},
component: () => import('./views/Guildpanel.vue')
}
]
})
export default router
MyWebsite.com/guildselector should show the Guildselector component for example, however I get a
Not Found The requested URL /guildselector was not found on this server.
Only the donate page and landing page work.
This is a very common problem; please read HTML5 History Mode in detail about how to configure your web server to host the files correctly.
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.
Simple solution is just comment this line:
mode: 'history',
Related
There is a project written in vue 3. When you go to the page through the router-link, there are no problems, but if you knock on the route directly through the url line, it gives an error: Not Found (The requested URL was not found on this server.)
Apache/2.4.53
import {createRouter, createWebHistory} from 'vue-router'
import Main from '../views/Main'
import Users from '../views/Users'
const routes = [
{
path: '/',
name: 'home',
component: Main
},
{
path: '/users',
name: 'users',
component: Users
},
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
That sounds like your web server isn't configured to serve the index.html of you Vue app also on errors like 404. You should set it up via ErrorDocument or FallbackResource.
So I recently wanted to try and learn vuejs, so I used the CLI to create my project and to setup vue-router. Now, with the default vue router configuration the URL's show as /#/ and /#/about. However, in my configuration file I set the paths as / and /About. As I want the URL's to be like that, does anyone know how I can do this?
router > index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import('../views/Home.vue'),
meta: { title: 'Home', description: 'Foo bar.' }
},
{
path: '/About',
name: 'About',
component: () =>
import('../views/About.vue'),
meta: { title: 'About', description: 'Lorem ipsum.' }
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
EDIT:
Okay, so I found that the best way to fix this in VueJS v3 is to just switch out createWebHashHistory with createWebHistory, it's literally that simple. After you've switched your imports and the createRouter object, it should all be working fine! 🥳
I am using the #nuxtjs/router module for defining custom routes. Here is my router.js file
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: News,
},
{
path: '/news',
name: 'News',
component: News,
},
{
path: '/news/:tag',
name: 'TaggedNews',
component: News,
},
{
path: '/news/:id([a-f0-9]{32})/:title',
name: 'NewsItem',
component: News,
},
{
path: '/news/:tag/:id([a-f0-9]{32})/:title',
name: 'TaggedNewsItem',
component: News,
},
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
I want to open the /login route as a modal on Desktop but page on mobile. How do I go about it?
Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login on desktop and the issue becomes clear.
My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:
query Param would be handled by a LoginModal component on the app root
closing/opening would both trigger and be managed by changes to the query parameter
On mobile, the modal can be styled as a full screen block.
I have a landing page with register/login from that redirects to main page with content. After successful login I redirect like this:
this.$router.push({ name: 'main' })
And this works, but if I refresh the page or try to access it from url for example like http://testapp.test/main I get error: Page does not exists 404.
Currently I don’t have any protection against access to pages that are only for logged in users, I also added ‘*’ path in router for undefined routes and it also just throws 404 instead of loading home page. Here are my router settings:
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import {store} from './store/store'
Vue.use(BootstrapVue);
Vue.use(VueRouter);
window.Vue = require('vue');
import Home from './components/LandingPage.vue'
import Main from './components/MainPage.vue'
import Logout from './components/Logout.vue'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/main',
name: 'main',
component: Main,
},
{
path: '/logout',
name: 'logout',
component: Logout,
},
{
path :'*',
name: 'home',
component: Home,
}
],
});
const app = new Vue({
el: '#app',
components: { Home, Main, Logout },
router,
store,
});
I tried with https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations but I am not sure if I did it right. What I did is copied code for apache configuration and replaced existing code in .htaccess with it. But then even route from login stops working and if I access /main it gives me 404 error.
I solved it with adding
Route::get('/{vue_capture?}', function () { return view('welcome'); })->where('vue_capture', '[\/\w\.-]*');
into the web.php file
You have to made also server side configuration for this.. As an alternative, you can try other router modes? like "hash"
Here is documentation for mode and server configuration.
https://router.vuejs.org/api/#mode
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
i'm trying to use VueRouter 2.2.1 in my Laravel application and for some reason my URL's (although working) show the # symbol in a weird way
http://myapp.dev/admin#/
Instead of
http://myapp.dev/admin/#/
As i would normally expect...
This is my VueRouter configuration
const Router = new VueRouter({
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
And on the PHP side of things i'm just defining a catch all route for the /admin section of the Application
// Catch-all Route, sends GET requests to VueRouter //
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '(.*)'])->name('catchall');
Like this, is there anything i'm doing wrong? It is working but it just kinda bugs me that the # just floats there.
You have to enable history mode, as stated here, I dont see that in your vue-router config.
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
You have to do it on server side, just redirect the route to one ended with '/'
As in laravel:
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '^/admin\/$'])->name('catchall');
now just visit /admin/#/