laravel-5 - VueRouter 未定义

标签 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 未定义”

最佳答案

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

关于laravel-5 - VueRouter 未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47634122/

相关文章:

php - 使用 Laravel 验证检查字符串是否为 "0"

vue.js - 如何在没有CORS错误的情况下在Vue CLI中加载JSON

javascript - Vue.js:使用方法切换动态数据的 CSS 类

vue.js - 使用标签插槽一次后,Vuetify v-radio 标签损坏

php - 如何在 Laravel 的应用程序/控制台/内核中注入(inject)类?

Laravel 5 命令 - 一个接一个地执行

php - Laravel session 闪存消息和按钮

javascript - 如何让我的表格正确显示分组数据?

vue.js - vuetify 带有子菜单的下拉菜单在选择时不会关闭

Laravel 5.3 - 如何在查询生成器中设置 fetchmode?