Using vuejs 2 and the official vue-router.
How can I access the Router instance from a service that has not been given the instance?
We have an class that listens to a socket, on one particular event heard I need to use the vue-router to redirect to another page but I cannot see anywhere how to do this?
The answer I found is:
First initialize the app into the window obj.:
window.vm = new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: {App}
})
Now you access the router anywhere with ease:
window.vm.$route
or
window.vm.$router
Related
I tried about everything but I just can't figure it out. Asking some help from Vue pros :D
import calendar_component from "./components/calendar_component.js";
import AKAD from "./ADAKNotes_revamp.js";
import list_component from "./components/list_component.js";
const AKAD_app = new Vue({
el: "#app",
components: [calendar_component, list_component]
});
// [[Vue warn]: Unknown custom element: <list-comp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
From Vue API Guide, it is one object for {components } instead of one array.
So try below codes:
const AKAD_app = new Vue({
el: "#app",
components: {calendar_component, list_component}
// or assign special id for components {'calendar': calendar_component, 'list-comp': list_component}
});
I'm having difficulties accessing my api within my store modules. I've created an instance of my api, passed it within my vue creation just like the store. However when trying to implement logic in my module, the this.$api does not work like it works in my components. Is there any way to access my already created instance of api?
const api = new Api();
/* eslint-disable no-new */
new Vue({
components: {App},
router,
api, // <--- I want this.
store, // <--- To be accesable in the modules of this
template: '<App/>'
}).$mount('#app');
So can I access the api instance without creating a new instance in my module or store?
I think you should be able to inject api directly to store, like this:
const store = new Vuex.Store();
const $axios = axios.create();
store.$axios = $axios;
new Vue({
components: {App},
router,
store,
template: '<App/>'
}).$mount('#app');
Anyways, for Axios, it worked fine: https://forum.vuejs.org/t/accessing-axios-in-vuex-module/29414/3
I'm a newbie in javascript and vue.js and I'm facing some issue when trying to add a new route in an existing programme.
I created my new component in a separate file called Miniature.vue
I added the new route in the router definition:
export default new Router({
routes: [
{
path: '/certificat/:id',
name: 'Certificat',
component: Certificat
},
{
path: '/miniature/:id',
name: 'Miniature',
component: Miniature
}
]
})
And then, in the vue instantiation, I added my new components and updated the template :
new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
<Certificat></Certificat>
<Miniature></Miniature>
</div>'
})
The previous template was simply
template: '<Certificat/>'
Problem is, the url is either mywebsite/certificat/123 or mywebsite/miniature/123, both routes are executed, and my two components are displayed !
What is the purpose of the template in the Vue constructor anyway? If I remove it, nothing happens.
What am I missing here ??
Those components are supposed to be loaded from your route, so they shouldn't be in your app template (i.e., they should be removed from #app's components and template).
Your app should contain <router-view> somewhere for the route to be rendered. In your case, replace the app template string with <router-view/>.
It should look similar to this:
new Vue({
el: '#app',
router,
template: '<router-view/>'
})
I should mention your router setup is missing a route for / and 404, so the default path and unknown routes will render nothing in your app. Users would have to navigate to the exact routes you've configured to see anything.
Vue doesn't have routing built-in, for routing you'll need the vue-router package.
To get a better understanding of template and Vue in general, I recommend reading the Introduction guide
I am using Vue 2.4.4. I have been searching for gettin URL query params, and most places following are suggested:
this.$route.query.test
$route is undefined do you need to do something special to get this working?
I found a solution thanks to tanathos:
var router = new VueRouter({
mode: 'history',
routes: []
});
var index = new Vue({
el: '#index',
router,
mounted: function () {
alert(this.$route.query.test);
In your main.js (or anyway, the entry point of your application) you'll need first to import the VueRouter:
import Vue from "vue";
import VueRouter from 'vue-router';
and use it to extend Vue:
Vue.use(VueRouter);
At this point you'll need to crete the real instance of the router, configuring it according to your application's needs:
const router = new VueRouter({
/* your configuration options */
});
The you inject this instance in the Vue root instance:
new Vue({
router,
/* etc... */
});
At this point the $router and $route object should be available from any Vue component.
In index.html :
<script>
function demoFunction(name) {
this.$router.push({name: 'Succ'})
}
Why this.$router is undefined? How can I get vue-router? Thanks
Looks like You defined the function in the global scope, so this inside your function will point to the global object which is window in the browser. window does not have the property $router , that's the reason you get undefined.
You can use this.$router inside your vue options only and that too :
if you created a new router instance like this
var router = new VueRouter({
routes:[
//your route objects
]
});
and then passed this router instance as a property to the root vue instance
new Vue({
el: '#app',
router: router
});