有没有同学遇到这个问题呢？

控制台 报错 template or render function not defined.

那是因为，你将vue-rotuer中的 component 定义错了

正确方法：component: () => import("　")

错误方法：component: import("")

很明显，component 后面应该是一个箭头函数。

 

---

components VS component 同学们对于这两个有没有傻傻的分不清楚呢？

components 官方api文档中定义了，它是包含 Vue 实例可用组件的哈希表，是一个对象。

component   它是内置组件，它可以定义自己的props属性 is，inline-template。

在vue-router表中，这两个都有使用的场景。

比如有时，需要同时显示多个视图而不是嵌套它们，创建包含一个header视图, 这是命名视图派上用场的地方。你可以在多个视图中命名一个名称，而不是在视图中显示一个名称。router-view不带名称的A将default作为其名称。一个视图是通过使用组件渲染的，因此，对于同一路线，多个视图需要多个组件。确保使用components（带有s）选项：

  import Header from './src/Header/index'

 {
    path: '/home',
    name: 'home',
    components: {
      default: () => import('@/src/pages/home'),
      header: Header
    },
    meta: { requireAuth: true, title: 'home' }
  }

同时，在一个单文件中，要用到组件，此时是局部注册 

import home form "./src/home"

export default {
    ...
    components: { home },
}

全局注册

Vue.component('home', { /* ... */ })

component 是这样使用，这也是常用方法

 {
    path: '/home',
    name: 'home',
    component: () => import('@/src/pages/home'),   
    meta: { requireAuth: true, title: 'home' }
  }

---

this.$router 和 this.$route 的区别

this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。