VueRouter 未定义

Posted 2023-02-22

【中文标题】VueRouter 未定义

【英文标题】：VueRouter is not defined

【发布时间】：2018-05-17 23:07:10

【问题描述】：

我有一个 laravel 项目，想使用 Vue.js 作为前端。但我从来没有用过 比 jquery 更复杂的东西。我无法运行 vue-router。

在我的 app.js 中

require('./bootstrap');
require('./vue-router');
require('./routes');

window.Vue = require('vue');
     const app = new Vue(
     el: '#app',
);

然后我从https://router.vuejs.org/en/installation.html复制代码vue-router

在我的 routes.js 中

const router = new VueRouter();

var App = Vue.extend();

router.start(App, '#app');

当我尝试在控制台中打开页面时，我会看到下一个：“”

【参考方案1】：

你必须先通过 Vue.use() 方法告诉 Vue 使用 VueRouter。所以，做：

import VueRouter from 'vue-router'

# add this code
Vue.use(VueRouter)

var router = new VueRouter(
  routes: [
    path: 'home', component: homeComponent 
  ]
)

更新：

首先使用安装vue-router

npm install --save vue-router

然后像导入一样使用

import VueRouter from 'vue-router'

然后在vue中使用

Vue.use(VueRouter)

然后定义你的路线：

const routes = [
 path: '/', component: SomeComponent
]

然后初始化路由器并将路由传递给它

var router = new VueRouter(
  routes: routes,
  mode: 'history'
)

将路由器传递给 vuejs 然后获利:)

new Vue(
  el: '#root',
  router: router
)

【讨论】：

好的，谢谢。我做了 window.VueRouter = require('vue-router'); Vue.use(VueRouter);但现在我有错误 Uncaught TypeError: VueRouter is not a constructor

离开window.VueRouter 做VueRouter

你能用import VueRouter from 'vue-router'代替require ..

从'vue-router'导入VueRouter； Vue.use(VueRouter);现在再次“未定义 VueRouter”

现在我遇到了问题，请先执行npm install --save vue 第二次从您的app.js 中删除require('packages')（第22 行）第三次：将packages.js 中的所有代码放入app.js（在第 22 行）第四：删除 routes.js 中的第 5-8 行并将其放入 app.js（第 23 行之后）并在 route.js 中将 export default routes 放入第 4 行之后。

【参考方案2】：

您忘记使用Vue.use 方法，您可以这样做：

Vue.use(VueRouter) // use the imported router as the parameter.