Vue组件不加载

Question

单击“下一步”按钮后，我想加载一个 vue 组件。 该项目是laravel + vue。 如果我将组件直接放入 laravel 刀片（您可以在下面看到它们），则组件会加载，但如果我尝试从组件中打开组件，则它不起作用。 我没有得到任何错误，它只是保持相同的组件。 地址栏中的路线更改为它应该更改的路线......我的意思是它真的很糟糕。

应用程序.js：

require('./bootstrap');

window.Vue = require('vue').default;

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

Vue.use(VueRouter);

Vue.component('productinfo-index', require('./components/productInfo/index.vue').default);
Vue.component('audit-index', require('./components/audit/index.vue').default);
Vue.component('audit-info', require('./components/audit/auditInfo.vue').default);



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

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

路线.js：

import ProductInfoIndex from './components/productInfo/index';
import Audit from './components/audit/index';
import AuditInfo from './components/audit/auditInfo';

export const routes = [

    {
        path: '/productInfo',
        name: 'ProductInfoIndex',
        component: ProductInfoIndex
    },
    {
        path: '/audit',
        name: 'Audit',
        component: Audit
    },
    {
        path: '/audit/info',
        name: 'AuditInfo',
        component: AuditInfo
    }
];

索引.vue：

<template>
   <div>
        <!-- Page Heading -->
         <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Inventorizacija</h1>
        </div>
        <div class="row">
            <div class="card  mx-auto">
                <div class="card-header">
                    <router-link
                        :to="{name: 'AuditInfo'}"
                        class="btn btn-primary mb-2"
                        >Next</router-link>
                </div>
                <!-- <div v-if="showMessage">
                    <div class="alert alert-success">{{ message }}</div>
                </div>                -->
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Pavadinimas</th>
                                <th scope="col">Pradėta</th>
                            </tr>
                        </thead>

                </div>
            </div>
        </div> 
    </div>
</template>

AuditInfo.vue（应该加载的组件）：

<template>
  <div class="row">
            <div class="card  mx-auto">
               <div class="card-header">
                    <router-link
                        :to="{name: 'Audit'}"
                        class="btn btn-primary mb-2"
                        >Back</router-link>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Pavadinimas</th>
                                <th scope="col">Pradėta</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                           
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div> 
</template>

Answer 1

你应该把<router-view />放在 index.vue 的某个地方来渲染路由器组件。