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
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.
I have a backoffice in Laravel with dynamic routes, however, I don't know how I do this in vue js, that is, create routes dynamically, so that a controller or something like that returns me the correct view!
You could try Vue Router's Dynamic Route matching, passing different values for route parameters: https://router.vuejs.org/guide/essentials/dynamic-matching.html
Small example for you.
Laravel part
Your "web" routes in Laravel
Route::get('/{any}', 'AppController')->where('any', '.*');
Inside invoke controller
public function __invoke()
{
return view('app');
}
In app.blade
#extends('layouts.app')
#section('content')
<div id="app">
<app/>
</div>
#endsection
Vuejs part:
Your router file
import Login from "./views/Login";
import Home from "./views/Home";
import NotFound from "./views/NotFound";
Vue.use(VueRouter);
let router = new VueRouter({
routes: [
{ path: '/login', name: 'login', component: Login },
{ path: "/", name: 'home', component: Home },
{ path: "*", name: '404', component: NotFound }
});
In app.js
import router from './router';
const app = new Vue({
store,
router,
i18n,
el: '#app',
});
All post, put, patch routes should be "api" routes.
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',
Hello apologise for my question could be very dummy but i was not able to find correct answer in google. I dont have access to this.$router in Vue. From what i found it says vue inject router as dependecy to every component. But still my this.$route do not shows up. I'm using Vue version 3.2.1 and vue-router 3.0.1 (selected from CLI when project it's generated). Im alowed to navigate tho. Everything seems to be correctly just this dependency $router i dont have access to it.
I tryed to research in google everything but unsuccessfully. What i found it was only that which says vue inject router as dependency to every component still unsucesfull to find as property to my class $router. Everything else works good tho, i mean router link, router view just property to reach params or query or redirect is missing.
How did you initialize your vue-router module with Vue ?
It should be like this :
import Vue from 'vue'
import VueRouter from 'vue-router'
// Include plugin
Vue.use(VueRouter)
// Initialize your router
const vueRouter = new VueRouter({
routes: [] // your routes
})
// Send your router to your Vue top component
const app = new Vue({
el: '#my-app',
router: vueRouter,
render: h => h(App)
})
import Vue from 'vue';
import './plugins/vuetify'
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
And i have separate file with my routes:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Signin from './views/Users/Signin.vue';
import Signup from './views/Users/Signup.vue';
import Profile from './views/Users/Profile.vue';
import AddPlace from './views/WorldPlaces/AddPlace.vue';
import AllPlaces from './views/WorldPlaces/AllPlaces.vue';
import DetailsPlace from './views/WorldPlaces/DetailsPlace.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: Signup
},
{
path: '/signin',
name: 'signin',
component: Signin
},
{
path: '/profile',
name: 'profile',
component: Profile
},
{
path: '/places/add',
name: 'addplace',
component: AddPlace
},
{
path: '/places/all',
name: 'allplaces',
component: AllPlaces
},
{
path: '/places/details/:id',
name: 'detailsplace',
component: DetailsPlace
}
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
// },
],
mode: 'history'
});
I'm trying to use vue-router to link url's to their corresponding components.
My issue is that only the root url ('/') can link to the correct component and any other url (e.g. '/first') does not link to their component. All of them link to the component which belongs to the '/' url.
When I use "a" tag in the vue file it will route to the right component - it's only when I input the url directly into the browser that it doesn't work
main.js:
import Vue from 'vue'
import router from './router/index.js'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
// components: { App },
render: h => h(App)
})
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(Router)
const routes =[
{
path: '/',
component: Login
},
{
path:'/first',
component:Hello
}
]
const router = new Router({
routes
})
export default router
I think you can also try as below. It's works, just try it! You can add mode: 'hash', to give default # in all urls.
import Vue from 'vue';
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
base: '/your_base_name_if_you_want',
linkActiveClass: 'active-tab', //if you w
routes: [
{
path: '/',
redirect: '/if_you_want_to_redirect',
name: 'Login', //Whatever
component: {
render (c) { return c('router-view'); }
},
children: [
{
path: '/',
component: Login
name: 'Login',
meta: { title: 'Your title name' }
},
{
path:'/first',
component:Hello
name: 'Hello',
meta: { title: 'Your title name' }
}
]
}
]
})
export default router
You can also remove it from your urls using:
var router = new VueRouter({
history: true
});
Hope this helps you!
The default mode for vue-router is hash mode
This is why you can't get the 'Hello' component when your url is '/first'. Instead you can try input '/#/first'.
If you want to use history mode like '/first', set the mode attribute for your route object like this.
const router = new Router({
mode: 'history',
routes
})
Hope it helps you.