原创

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

1.vue-router

  1. 啥也不说了 hello word之后肯定就是要路由了,不管是php还是java下一步都是搞动态路由,不然怎么curd?
  2. vue也不例外 但是遇到不少问题
  3. 更重要的是 网上文档不全,花样多,,导致各种错误 比如标题这个错误
"Routr.js"
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

let router = new VueRouter({
    routes: [{
        path:'/a',
        component:require('./components/A.vue')
    }]
})
export default router

标题的错误主要是因为这一行代码 component:require('./components/A.vue')
在访问跟路径的时候不会报错,访问其他子组件页面的时候就会报标题的错误
改为components:require('./components/A.vue')即可

2.来一个完成路由配置

main.js

import Vue from 'vue';
import routers from './Router.js'
import App from './App.vue';

new Vue({
    el:'#app',
    router:routers,
    template:'<App />',
    components: {App}
})

Router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

let router = new VueRouter({
    routes: [{
        path:'/a',
        components:require('./components/A.vue')
    }]
})
export default router

App.vue

<script>
export default {
  name: 'App',
}

</script>
<template>
  <div id="app"> 
    <router-view></router-view>
  </div>
</template>

A.vue随便写点啥就行了 然后就可以 ip:端口/#/a 就可以展示 A.vue的内容了

正文到此结束
本文目录