VueJS Router: $route is not defined

Question

This is my component:

const Vue = require("vue/dist/vue.js");
const qs = require("querystring");

module.exports = Vue.component("Page",function(resolve){
    console.log($route);
    let id = this.$route.params.id;
    fetch("/getPage.json",{
        method:"POST",
        body:qs.stringify({
            id
        })
    }).then(r=>r.json())
    .then(j=>{
        console.log(j);
        resolve({
            template:`<h1>`+JSON.stringify(j)+"</h1>"
        });
    })
});

And this is my router:

const router = new VueRouter({
	mode:"history",
	routes:[
		{
			path:"/",
			component:Home
		},
		{
			path:"/me",
			component:Me
		},
		{
			path:"/create-page",
			component:createPage
		},
		{
			path:"/p/:id",
			component:Page
		}
	]
});
Vue.use(VueRouter);

When i run this app i get:

ReferenceError: $route is not defined

I tried using this.$route but it's not working. I'm using an arrow function. When i do this it works:

const Vue = require("vue/dist/vue.js");

module.exports = Vue.component("Page",function(resolve){
  resolve({
    template:`<h1>{{$route.params.id}}`
  });
});

Please help me figure out how to fix this.

yussan · Accepted Answer · 2018-01-26 07:21:32Z

2

in your main vue app

new Vue(...)

you have to use vue-router first

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
...
new Vue(...)
...

and the go ahead with route declaration

edited Jan 26, 2018 at 7:21

answered Jan 26, 2018 at 4:29

yussan

2,3472 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

try dahan Over a year ago

I am using Vue.use(VueRouter).

Volodymyr Symonenko · Accepted Answer · 2018-01-27 17:19:39Z

1

you forgot to add router in Vue instance

in you main.js or app.js or index.js (entry point)

const app = new Vue({
  router
})

documentation

answered Jan 27, 2018 at 17:19

Volodymyr Symonenko

8889 silver badges16 bronze badges

Comments

Kishan Vaghela · Accepted Answer · 2019-06-27 09:36:02Z

0

You should NOT use arrow functions

data: function() {
    return {
      usertype: this.$route.params.type
    };
  },

This worked for me.

answered Jun 27, 2019 at 9:36

Kishan Vaghela

7,9585 gold badges45 silver badges70 bronze badges

Collectives™ on Stack Overflow

VueJS Router: $route is not defined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related