See Special Attributes – key It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to: Properly trigger lifecycle hooks of a component Trigger transitions $route.fullPath is defined as The full resolved URL including query and hash. If you bind key to $route.fullPath, … Read more
According to the docs of route object, you have access to a $route object from your components, which exposes what you need. In this case //from your component console.log(this.$route.query.test) // outputs ‘yay’
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 think that you can do something like this: let routeData = this.$router.resolve({name: ‘routeName’, query: {data: “someData”}}); window.open(routeData.href, ‘_blank’); It worked for me.
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
A simple and effective way to solve this, it’s by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script: <template> …. your HTML </template> <script> export default { data: () => ({ ……data of your component }), mounted() { let recaptchaScript = document.createElement(‘script’) recaptchaScript.setAttribute(‘src’, … Read more