vue-router无法访问我的组件

时间:2018-08-16 09:59:42

标签: vuejs2 vue-component vuex vue-router

根据询问,我的vue-router似乎找不到我的组件。

我要说的是,我在用户输入后添加了一条新路由,然后我无法访问该特定路由。我在router.js中设置为静态的路由仍然有效。 我试图用

全局导入组件
import componentName from "./views/componentName"
Vue.component("componentName")

,并且还尝试仅在路由器或我放置链接的组件中导入组件,这会将我们发送到该组件。

然后我收到以下错误消息:

[Vue warn]: Failed to mount component: template or render function not defined

这是我的代码:

router.js:

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
import About from "./views/About.vue";
import Menu from "./views/Menu.vue";
import Home from "./views/Home.vue";
import Test from "./views/Test.vue";
export default new Router({
  routes: [
  {
    path: "/home",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    component: About
  },
  {
    path: "/menu",
    name: "menu",
    component: Menu
  }
  ]
});

main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import componentPlugin from "./componentPlugin";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
Vue.use(componentPlugin);
Vue.use(BootstrapVue);

componentPlugin:

import List from "./components/List.vue";
import MainMenu from "./components/MainMenu.vue";
import Test from "./views/Test.vue";
import About from "./views/About.vue";
import Menu from "./views/Menu.vue";
import Home from "./views/Home.vue";

export default {
  install(Vue) {
    Vue.component("List", List);
    Vue.component("MainMenu", MainMenu);
    Vue.component("Test", Test);
    Vue.component("About", About);
    Vue.component("Menu", Menu);
    Vue.component("Home", Home);
  }
};

List.vue:

<template>
<div>
    <div v-if="title === 'Create new Project'">
        <button @click="nepro = !nepro">{{ title }}</button>
    </div>
    <div v-if="title !== 'Create new Project'">
        <b-container>
            <b-row>
                <b-col>
                    <p>{{ title }}</p>
                    <div id="nav">
                        <router-link :to="'/' + title">{{ title }}</router-link>
                    </div>
                    <router-view></router-view>
                </b-col>
                <b-col><button @click="delProject(id)">X</button></b-col>
            </b-row>
        </b-container>
    </div>
    <div v-if="nepro" @keydown.enter="newProject(projectName)">
        <label for="qwer">Insert Name here: </label>
        <br>
        <input id="qwer" type="text" v-model="projectName">
        <button :disabled="this.$store.state.projectname.length == 0" @click="newProject(projectName)">Finish</button>
    </div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import Test from "/home/pc-praktikant/VUE/test/src/views/Test.vue";
import About from "/home/pc-praktikant/VUE/test/src/views/About.vue";
export default {
  name: "List",
  components: {
    Test,
    About
  },
  props: {
    title: String,
    id: Number
  },
  data: function() {
    return {
      nepro: false
    };
  },
  watch: {
    reloaded: function() {
      this.newRoute();
    }
  },
  computed: {
    projectName: {
      get() {
        return this.$store.state.projectname;
      },
      set(newVal) {
        this.editProjectName(newVal);
      }
    },
    ...mapGetters({
      reloaded: "getReloaded"
    })
  },
  methods: {
    newRoute() {
      this.$router.addRoutes([
        { path: "/addedRoute", component: { name: "About" } }
      ]);
    },
    newProject(name) {
      this.$store.dispatch("newProject", {
        id: this.$store.getters.getProjectNumber,
        title: this.$store.state.projectname,
        compRate: 0
      });
      this.$store.dispatch("newRoute", {
        path: "/" + name,
        name: name,
        comp: name
      });
      this.$store.commit("newName", "");
      this.nepro = !this.nepro;
    },
    delProject(actualid) {
      this.$store.dispatch("delProject", actualid);
    },
    editProjectName(name) {
      this.$store.commit("newName", name);
    }
  }
};
</script>

<style>
</style>

我用addRoutes添加了一条路线,这是我的问题。

App.vue:

<template>
<div id="app">
    <div id="nav">
        <router-link to="/home">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/menu">Menu</router-link>
    </div>
    <router-view/>
</div>
</template>

 <script>
export default {
  name: "App",
  Components: {},
  data: function() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {}
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

在这里,指向/menu的链接转到了一个组件,该组件为我的vuex存储中的每个项目调用List.vue

store.js:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    projects: [{ id: 0, title: "Create new Project", compRate: 0 }],
    globalid: 1,
    projectname: "",
    reloaded: 0
  },
  mutations: {
    newProject: (state, project) => {
      state.projects.push({
        id: project.id,
        title: project.title,
        compRate: project.compRate
      });
    },
    delProject: (state, id) => {
      state.projects.forEach(e => {
        if (id === e.id) {
          state.projects.splice(state.projects.indexOf(e), 1);
        }
      });
    },
    newName: (state, name) => {
      state.projectname = name;
    },
    newRoute: state => {
      state.reloaded++;
    }
  },
  actions: {
    newProject: ({ commit, state }, project) => {
      commit("newProject", {
        id: state.globalid,
        title: project.title,
        compRate: project.compRate
      });
      state.globalid++;
    },
    delProject: ({ commit }, id) => {
      commit("delProject", id);
    },
    newRoute: ({ commit }) => {
      commit("newRoute");
    }
  },
  getters: {
    getProjectNumber(state) {
      return state.projects.length;
    },
    getReloaded(state) {
      return state.reloaded;
    }
  }
});

我正在使用Vue v2.5.17和vue-router 2.0。

如果您需要更多信息,请告诉我。

1 个答案:

答案 0 :(得分:1)

您不能像这样全局地定义组件。全局声明某个组件时,您忘记声明此组件的内容和功能。错误报告中已经指出了这个问题。

正确的定义代码应该是这样

import componentName from "./views/componentName"
Vue.component("componentName", componentName)

您可以在官方手册中找到并定义更多的组件和语料库定义。

https://vuejs.org/v2/guide/components-registration.html#Component-Names

希望它对您有帮助