Question

我在laravel vue网站中将vue-route导入到我的app.js中。可悲的是，这是一个错误。你能指导我谢谢吗

app.js


require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = [
    {path: '/', component: require('./components/Welcome.vue') }

]

const router = new VueRouter({
    mode: 'history',   
   routes
   })



const app = new Vue({
    el: '#app',
    router,
});

master.blade.php

   <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
    <div id="app">

        @yield('content')

    </div>
</body

welcome.blade.php


@extends('layouts.master')

@section('content')

<router-view></router-view>
<vue-progress-bar> </vue-progress-bar>
@endsection

结果应该是Welcome.vue将显示。

Answer 1

根据documentation，您应注入router选项以使您的整个应用路由器知道。

所以你应该有这样的东西：

const app = new Vue({
  router
}).$mount('#app')

我认为这是this的副本。

Answer 2

如果您使用较新版本的Vue.js，则应该将require('./components/Welcome.vue')到{path: '/', component: require('./components/Welcome.vue').default }

第5行看起来像这样

git reset @~ -- .

Stack Overflow: Why need default after require() method in Vue?

如何修复未知的自定义元素：<router-view>

2 个答案: