Without reloading the page or refreshing the DOM, history.pushState can do the job. For example: add this method in your component or elsewhere to do that: addHashToLocation(params) { history.pushState( {}, null, this.$route.path + ‘#’ + encodeURIComponent(params) ) } Then anywhere in your component you can call addHashToLocation(‘/my/new/path’) to push query params to the window.history stack. … Read more
In Nuxt, the routes are generated automatically so I couldn’t do what @zxzak suggested. Here’s what you can do in that case. <template v-for=”item in items”> <b-nav-item :to=”item.path”> {{item.name}} </b-nav-item> </template> export default { created() { this.$router.options.routes.forEach(route => { this.items.push({ name: route.name , path: route.path }) }) } , data() { return { items: [] … Read more
I read Daniel’s Link and found a workaround: { path: ‘/github’, beforeEnter() {location.href=”http://github.com”} }
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
All of vue-router’s navigation guards receive the previous route as a from argument .. Every guard function receives three arguments: to: Route: the target Route Object being navigated to. from: Route: the current route being navigated away from. next: Function: this function must be called to resolve the hook. The action depends on the arguments … 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.
I think I found a solution. The approach has App.vue containing only <router-view></router-view> and then including different components that represent layout (if needed, containing <router-view> and subroutes). I found a project using it in that way here. I think it keeps things more clean and organised. IMHO, hiding all elements which define layout structure (all … Read more
You need to add the .native modifier: <router-link :to=”to” @click.native=”InlineButtonClickHandler” > {{name}} </router-link> This will listen to the native click event of the root element of the router-link component.
yes you can use vuejs route objects like $route.name or $route.path $nuxt.$route.path return current path $nuxt.$route.name The name of the current route, if it has one. Route Object Properties A route object represents the state of the current active route. It contains parsed information of the current URL and the route records matched by the … Read more
You can use a built-in component element like so: <component is=”ul” class=”foo” style=”color:red”> anything inside component </component> See: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components