Question

我有app.js的路线的以下代码段

let routes = [{
    path: "/dashboard",
    component: require("./components/Dashboard.vue")
  },
  {
    path: "/tour",
    component: require("./components/Index.vue"),
    children: [{
      name: 'create',
      path: '/create',
      component: require('./components/product/Create.vue')
    }]

  },
  {
    path: "*",
    component: require("./components/NotFound.vue")
  }
];

Master.blade.php

<div class="sidebar">
  <router-link class="btn btn-success" to="/dashboard">
    Dashboard
  </router-link>
  <router-link class="btn btn-success" to="/tour">
    Tour
  </router-link>
</div>
<div class="content">
  <router-view></router-view>
</div>

Index.vue

<template>
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Tours</h3>

            <div class="card-tools">
              <router-link class="btn btn-success" to="/tour/create">
                Add New
                <i class="fas fa-plus fa-fw"></i>
              </router-link>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">
            <table class="table table-hover text-center">
              <tbody>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Days</th>
                  <th>Price</th>
                  <th>Type</th>
                  <th>Image</th>
                  <th>Meta Title</th>
                  <th>Meta Description</th>
                  <th>Actions</th>
                </tr>

                <tr v-for="tour in tours.data" :key="tour.id">
                  <td>{{tour.id}}</td>
                  <td>{{tour.title}}</td>
                  <td>{{tour.days}}</td>
                  <td>{{tour.price}}</td>
                  <td>{{tour.category_id}}</td>
                  <td>
                    <i class="fas fa-check text-success" v-if="tour.image"></i>
                    <i class="fas fa-times text-danger" v-else></i>                      
                  </td>
                  <td>
                    <i class="fas fa-check text-success" v-if="tour.meta_title"></i>
                    <i class="fas fa-times text-danger" v-else></i>                      
                  </td>                  
                  <td>
                    <i class="fas fa-check text-success" v-if="tour.meta_description"></i>
                    <i class="fas fa-times text-danger" v-else></i>                      
                  </td>                  
                  <td>
                    <button @click="editModal(tour)" class="btn btn-primary btn-sm">Edit</button>

                    <button
                      @click="deleteUser(tour.id)"
                      class="btn btn-danger btn-sm"
                    >Delete</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
          <div class="card-footer"></div>
        </div>
        <!-- /.card -->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tours: ""
      };
    },
    methods: {
      initialLoad() {
        axios.get("api/tour").then(({
          data
        }) => (this.tours = data));
      }
    },
    created() {
      this.initialLoad();
    }
  };
</script>

Index.vue 显示所有保存在数据库中的游览。

添加新按钮位于 Index.vue 中，以加载 Create.vue 组件以创建游览。

但是点击创建按钮会从*路径加载 NotFound.vue 组件。在混合过程中和在控制台中都不会发出任何类型的消息。

我也尝试过：

import create from './components/product/Create.vue';

，然后将组件require('./components/product/Create.vue')替换为create

仍然没有进展。

有人能指出我在这里犯的错误吗？

Answer 1

创建一个新文件，并通过 Tourview.vue 保存在components文件夹中。

<template>
    <router-view ></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {      
      };
    },
    methods: {

  };
  };
</script>

并按如下所示更新您的路由文件。

let routes = [{
    path: "/dashboard",
    component: require("./components/Dashboard.vue")
  },
  {
    path: "/tour",
    component: require("./components/Tourview.vue"),
    children: [
     {
      path:'',
      component: require("./components/Index.vue")
     },
    {
      name: 'create',
      path: '/create',
      component: require('./components/product/Create.vue')
    }]

  },
  {
    path: "*",
    component: require("./components/NotFound.vue")
  }
];

找不到嵌套路由vue js

1 个答案: