CODEWITHSUNDEEP
vue.jsvue-router
Andon Mitev
Andon Mitev

Reputation: 1504

Vue Router dependency missing

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.

Upvotes: 0

Views: 3427

Answers (2)

Andon Mitev
Andon Mitev

Reputation: 1504

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'
});

Upvotes: 0

jtouzy
jtouzy

Reputation: 1639

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)
})

Upvotes: 1

Related Questions