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
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
<router-view :some-value-to-pass=”localValue”></router-view> and in your components just add prop: props: { someValueToPass: String }, vue-router will match prop in component
Passing objects to params was never supported in Vue-router It sort of worked in Router v3 with $router.push – the target component received the object. BUT as soon as user started using browser navigation (Back button) OR copy/pasting URL’s, this solution was broken (you can try it here – just click the button and then … Read more
This is the only way that I’ve found: We can listen for popstate, save it in a variable, and then check that variable // This listener will execute before router.beforeEach only if registered // before vue-router is registered with Vue.use(VueRouter) window.popStateDetected = false window.addEventListener(‘popstate’, () => { window.popStateDetected = true }) router.beforeEach((to, from, next) => … Read more
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files. The code below is not from me and all credit goes to this jsFiddle creator: Create an index.html file: <script src=”https://npmcdn.com/vue/dist/vue.js”></script> <script src=”https://npmcdn.com/vue-router/dist/vue-router.js”></script> <script src=”/js/Home.js”></script> <script src=”/js/Foo.js”></script> <script src=”/js/router.js”></script> <script src=”/js/index.js”></script> <div id=”app”> <router-link to=”https://stackoverflow.com/”>/home</router-link> <router-link to=”/foo”>/foo</router-link> <router-view></router-view> … Read more
I suppose getDetailMenu is calling API method to get listMenu. You can create route dynamically using addRoutes method Pseudo code created() { this.getDetailMenu(this.$route.path) .then((listMenu) => { // you need to return listMenu from getDetailMenu listMenu.forEach((item, index) => createAndAppendRoute(item, index)) }) }, methods: { createAndAppendRoute: (item, index) => { console.log(item, index) // Base on your data, … 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/”, });
This happens when you enter a route you are already on, and the component is not reloaded, even though the parameters are different. Change your router-view to: <router-view :key=”$route.fullPath” /> Vue tries to reuse components when possible, which is not what you want in this situation. The key attribute tells Vue to use a different … Read more
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.