It can work by using props’s Function mode and params Vue 2 demo: https://jsfiddle.net/hacg6ody/ when adding routes, use props’s Function mode so that it has a default property user and it will add route.params as props. { path: ‘/create’, name: ‘create’, component: CreateComponent, props: (route) => ({ user: userData, …route.params }) } params passed in … Read more
The :active pseudo-class is not the same as adding a class to style the element. The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the mouse button is pressed down and ends when it is released. What we … Read more
You need to declare your base path in touter config like this : export default new VueRouter({ mode:’history’, routes:[ { path: ‘/:listing’, component: ListingPage, name: ‘listing’ } ], base:’/listing’, root:”https://stackoverflow.com/”, });
Use params. this.$router.push({ name: ‘foo’, params: {title: ‘test title’ }}) Note: You have to specify name. This does not work if you call this.$router.push using path. And set the route to accept params as props. {path: “/foo”, name:”foo”, component: FooComponent, props: true} props: true is documented here.
Setup a watcher on the $route in your component like this: watch:{ $route (to, from){ this.show = false; } } This observes for route changes and when changed ,sets show to false
In Vue 3, you’d want to use createWebHistory for the history option. import { createRouter, createWebHashHistory } from ‘vue-router’ const router = createRouter({ history: createWebHashHistory(), // … }) In Vue 2, you’d want to set mode to ‘history’. const router = new VueRouter({ mode: ‘history’, // … }) Make sure your server is configured to … Read more
I think you should be able to use a default route handler and redirect from there to a page outside the app, as detailed below: const ROUTER_INSTANCE = new VueRouter({ mode: “history”, routes: [ { path: “/”, component: HomeComponent }, // … other routes … // and finally the default route, when none of the … Read more
I spent hours debugging this and got to the following results for the ugly Uncaught (in promise) Error: Redirected when going from … Error. Note that the error is not for the “redirect”. It’s for the initial caller of the first navigation. Keep reading… It’s by design. Why? Read this comment. TL;DR: Let’s say you … Read more
As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following: You have one store.js: import Vuex from ‘vuex’ //init store const store = new Vuex.Store({ state: { globalError: ”, user: { authenticated: false } }, … Read more
I think you are missing that SPA is not server side rendering. At least for the majority. So, when you access /anything your web server won’t redirect it to index.html. However, if you click on any vuejs router link, it will work due to the fact that the javascript got in action, but not the … Read more