Question

这是我的组成部分：

＆＃13;

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

＆＃13;

这是我的路由器：

＆＃13;

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

＆＃13;

当我运行这个应用程序时，我得到：

ReferenceError: $route is not defined

我尝试使用this.$route，但它无效。我正在使用箭头功能。当我这样做时，它有效：

＆＃13;

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

＆＃13;

请帮我弄清楚如何解决这个问题。

Answer 1

在您的主vue应用

中

new Vue(...)

你必须先使用vue-router

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

并继续进行路线声明

Answer 2

您忘记在Vue实例

中添加

const app = new Vue({
  router
})

在你的main.js或app.js或index.js（入口点）

rm -rf ~/Library/Developer/Xcode/DerivedData

documentation

Answer 3

您不应使用箭头功能

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

这对我有用。

VueJS路由器：$ route未定义

3 个答案: