Vue Router dependency missing

0
votes

Hello apologise for my question could be very dummy but i was not able to find correct answer in google. I dont have access to this.$router in Vue. From what i found it says vue inject router as dependecy to every component. But still my this.$route do not shows up. I'm using Vue version 3.2.1 and vue-router 3.0.1 (selected from CLI when project it's generated). Im alowed to navigate tho. Everything seems to be correctly just this dependency $router i dont have access to it.

I tryed to research in google everything but unsuccessfully. What i found it was only that which says vue inject router as dependency to every component still unsucesfull to find as property to my class $router. Everything else works good tho, i mean router link, router view just property to reach params or query or redirect is missing.

2
vue.jsvue-router
You should show us how you import vue-router, and how you're attempting to use this.$route in the components. – ceejayoz
Router setup provided below. I have click event on img and when its clicked in my callback i want to redirect the user to details on article, but my component do not have access to this.$route, none of them actually. – Andon Mitev
Can you share your component code too ? And you want access this.$route or this.$router ? (you talk about the two variables) – jtouzy
My bad i just realize intelisense it's not working correct i mean it's hiding this.$route. I logged it on console tho and its there sorry my bad thanks for your time – Andon Mitev

2 Answers

1
votes

How did you initialize your vue-router module with Vue ? It should be like this :

import Vue from 'vue'
import VueRouter from 'vue-router'

// Include plugin
Vue.use(VueRouter)

// Initialize your router
const vueRouter = new VueRouter({
   routes: [] // your routes
})

// Send your router to your Vue top component
const app = new Vue({
    el: '#my-app',
    router: vueRouter,
    render: h => h(App)
})
0
votes
import Vue from 'vue';
import './plugins/vuetify'
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

And i have separate file with my routes:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Signin from './views/Users/Signin.vue';
import Signup from './views/Users/Signup.vue';
import Profile from './views/Users/Profile.vue';
import AddPlace from './views/WorldPlaces/AddPlace.vue';
import AllPlaces from './views/WorldPlaces/AllPlaces.vue';
import DetailsPlace from './views/WorldPlaces/DetailsPlace.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/signup',
      name: 'signup',
      component: Signup
    },
    {
      path: '/signin',
      name: 'signin',
      component: Signin
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile
    },
    {
      path: '/places/add',
      name: 'addplace',
      component: AddPlace
    },
    {
      path: '/places/all',
      name: 'allplaces',
      component: AllPlaces
    },
    {
      path: '/places/details/:id',
      name: 'detailsplace',
      component: DetailsPlace
    }

    // {
    //   path: '/about',
    //   name: 'about',
    //   // route level code-splitting
    //   // this generates a separate chunk (about.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    // },
  ],
  mode: 'history'
});