Question

我正在为该项目使用Vue，Vue-router和laravel，这个问题一直困扰着我好几天：(任何想法？我似乎都找不到解决这个问题的方法。我什么也没找到即使最简单的foo bar模板也不起作用。

我的App.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App.vue';
// import { routes } from './routes.js'

Vue.use(VueRouter)


import Home from './components/Home.vue';
const Bar = { template: '<div>Bar</div>' }
const routes = [
    { path: '/bar', component: Bar },
    { path: '/', component: Home },
]



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

})


//Layouts
Vue.component('sidebar', require('./components/layouts/Side.vue').default)


new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

我的App.Vue

<template>
  <div>
      <div class="wrapper">
                <!-- Navbar -->
                <sidebar></sidebar>
                <!-- Content Wrapper. Contains page content -->
                <div class="content-wrapper">
                    <router-view></router-view>
                </div>  
  </div>
</template>

<script>
export default {

}
</script>

main.blade.php

<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
    <div id="app">
        <app>

        </app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>


</body>

Vue路由器未渲染组件

0 个答案: