vue.js - VueJs Router不渲染组件

Question

我不确定为什么单击该路由时VueJS Router无法渲染组件。我到处搜索，似乎没有人遇到问题...当我单击href按钮时，地址栏上的URL已更改，但旧组件仍然存在...我用Google搜索并搜索了stackoverflow，但我无法查找与此问题有关的任何问题。有人可以帮我解决这个问题吗？

我正在使用的代码:

main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
// import datePicker from 'vue-bootstrap-datetimepicker'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
// Vue.use(datePicker)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

路由器:

import Vue from 'vue'
import Router from 'vue-router'
import Form from '@/components/items/Form'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/add',
      name: 'addItem',
      component: Form
    }
  ]
})

表单组件:

<template>
<div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">

        <b-form-group id="categoryInputGroup"
                      label="Category:"
                      label-for="category">
            <b-form-select id="category"
                           :options="category"
                           required
                           v-model="form.category">
            </b-form-select>
        </b-form-group>
        <b-button type="submit" variant="primary">Submit</b-button>
        <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
</div>
</template>

<script>
  export default {
    name: 'Form',
    data () {
      return {
        form: {
          category: null
        },
        category: [
          { text: 'Select One', value: null },
          'Category one', 'Category two', 'Category four', 'Category five'
        ],
        show: true
      }
    },
    methods: {
      onSubmit (evt) {
        evt.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset (evt) {
        evt.preventDefault()
        /* Reset our form values */
        this.form.category = null
        this.$nextTick(() => { this.show = true })
      }
    }
  }
</script>

<style scoped>

</style>

链接:

 <router-link  tag="button" :to="{name: 'addItem'}">Add</router-link>

项目:(使用链接的地方)

<template>
<div class="items">
    <b-form-group id="filters">
        <b-row>
            <b-col>
                <b-form-group horizontal :label-cols="3" label="From: " label-for="fromDate">
                    <flat-pickr v-model="fromDate"
                                :config="config"
                                class="form-control"
                                placeholder="Select date"
                                name="fromDate">
                    </flat-pickr>
                </b-form-group>
            </b-col>
            <b-col>
                <b-form-group horizontal :label-cols="3" label="To: " label-for="toDate">
                    <flat-pickr v-model="toDate"
                                :config="config"
                                class="form-control"
                                placeholder="Select date"
                                name="toDate">
                    </flat-pickr>
                </b-form-group>
            </b-col>

            <b-col>
                <b-dropdown id="category" text="Select a category" variant="default">
                    <b-dropdown-item>First category</b-dropdown-item>
                    <b-dropdown-item>Second category</b-dropdown-item>
                    <b-dropdown-item>Third category</b-dropdown-item>
                </b-dropdown>
            </b-col>
            <b-col>
                <b-dropdown id="type" text="Select a type" variant="default">
                    <b-dropdown-item>First type</b-dropdown-item>
                    <b-dropdown-item>Second type</b-dropdown-item>
                    <b-dropdown-item>Third type</b-dropdown-item>
                </b-dropdown>
            </b-col>
            <b-col>
                <b-button style="float:left;">Filter</b-button>
            </b-col>
        </b-row>
    </b-form-group>

    <br/>
    <hr/>
    <br/>
    <div>
        <label style="float:left; font-weight: bold;">List of items:</label>
        <router-link  tag="button" :to="{name: 'addItem'}">Add</router-link>
    </div>
    <br/><br/>
    <b-table hover striped responsive fixed :items="items"></b-table>
</div>
</template>

<script>
  import flatPickr from 'vue-flatpickr-component'
  import 'flatpickr/dist/flatpickr.css'

  const items = [
    {
      id: 1,
      isActive: true,
      name: 'Dickerson',
      category: 'Macdonald',
      type: 'First type',
      serial_number: '12345-98745',
      loan: 'Typeqast',
      return: '-',
      action: 'edit'
    },
    {
      id: 2,
      isActive: false,
      name: 'Larsen',
      category: 'Shaw',
      type: 'Second type',
      serial_number: '12345-23545',
      loan: 'Typeqast',
      return: '-',
      action: 'edit'
    },
    {
      id: 3,
      isActive: false,
      name: 'Geneva',
      category: 'Wilson',
      type: 'First type',
      serial_number: '12345-77777',
      loan: 'Typeqast',
      return: '-',
      action: 'edit'
    }, // _rowVariant: 'danger' },
    {
      id: 4,
      isActive: true,
      name: 'Thor',
      category: 'Macdonald',
      type: 'First type',
      serial_number: '12345-55555',
      loan: 'Typeqast',
      return: '-',
      action: 'edit'
    }, // _cellVariants: { isActive: 'success', age: 'info', name: 'warning' } },
    {
      id: 5,
      isActive: false,
      name: 'Dick',
      category: 'Dunlap',
      type: 'Third type',
      serial_number: '12345-12347',
      loan: 'Typeqast',
      return: '-',
      action: 'edit'
    }
  ]

  export default {
    name: 'items',
    data () {
      return {
        items: items,
        fromDate: null,
        toDate: null,
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'd.m.Y.',
          altInput: true,
          dateFormat: 'Y-m-d'
        }
      }
    },
    components: {
      flatPickr
    }
  }
</script>

<style scoped>
    #filters {
        margin-top: 25px;
    }
</style>

应用程序

    <template>
    <div id="app">
        <h1>{{ title }}</h1>
        <br/>
        <b-tabs card>
            <b-tab title="Items" active>
                <items></items>
            </b-tab>
            <b-tab title="Users">
                <users></users>
            </b-tab>
            <b-tab title="Management">
            </b-tab>
        </b-tabs>
    </div>
</template>

<script>
  import Items from './components/items/Items'
  import Users from './components/users/Users'
  export default {
    name: 'app',
    components: {Items, Users},
    data () {
      return {
        title: 'Company inventory'
      }
    }
  }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin: 60px 60px;
    }

    h1 {
        color: dimgray;
        font-size: 75px;
        font-weight: bold;
        font-family: Brush Script MT;
    }
</style>

Answer 1

-您的父模板怎么样？可能缺少您的

<router-view></router-view>

可能在您的main.vue或layout.vue中，具体取决于项目的结构