根据询问，我的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。
如果您需要更多信息，请告诉我。
答案 0 :(得分：1)
您不能像这样全局地定义组件。全局声明某个组件时，您忘记声明此组件的内容和功能。错误报告中已经指出了这个问题。
正确的定义代码应该是这样
import componentName from "./views/componentName"
Vue.component("componentName", componentName)
您可以在官方手册中找到并定义更多的组件和语料库定义。
https://vuejs.org/v2/guide/components-registration.html#Component-Names
希望它对您有帮助