前言

在vue群里待了一段时间，总是有一些新人说vue-router不会用，显示空白。在这里记录一下常犯的错误。

• new VueRouter()
  这里实例化一个vue-router对象，需要传入一个object（通常是对象字面量）作为参数，然而新手有可能会直接传了routes映射数组

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

  Vue.use(VueRouter);

  const routes = [
    {
      name: 'home',
      path: '/',
      component: home
    },
    {
      path: '*',
      redirect: '/'
    }
  ];

  // 错误的
  let router = new VueRouter(routes);
  // 正确的
  let router = new VueRouter({ routes });

• component和components
  还有一些小伙伴，在路由隐射上写了components，你要记住一个路由页面对应一个组件啊！！！

  // 提取部分
  const routes = [
    {
      name: 'home',
      path: '/',
      // 错误的
      // components: home
      // 正确的
      component: home
    },
    {
      path: '*',
      redirect: '/'
    }
  ];

结语

想起来的就这么多，再碰到的相关的会继续收集进来