VueRouter未定义

时间:2017-12-04 13:07:16

标签: laravel-5 vue.js

我有一个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');

当我在控制台中尝试打开页面时,我会看到下一个:“VueRouter未定义”

2 个答案:

答案 0 :(得分:4)

您必须首先使用方法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
})

答案 1 :(得分:0)

您忘了使用Vue.use方法,这里是如何做到的:

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