今天用Vue Router的时候发现了一个比较有趣的事情。

先来看看我一开始写的router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/user",
    name: "User",
    component: () => {
      import("../views/User.vue");
    }
  },
  {
    path: "/about",
    name: "About",
    component: () => {
      import("../views/About.vue");
    }
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

npm run serve之后，编译的确可以过，但是却发现怎么样都跳转不了，通过Chrome Inspect观察，我发现，user和about的链接少了一个class: router-link-active。

不过我搜了一圈，根本搜不到任何与我这种情况相符的问题。

不过，我觉得

component: () => {
  import("../views/About.vue");
}

的写法太丑了，所以就把它换成了

component: () => import("../views/Add.vue")

结果，这个时候点击网页上的链接居然跳转成功了。

我很快就意识到了问题所在。第一种情况没有返回值。

第二种为什么可行是因为这种简化的箭头函数会返回import("…/views/Add.vue")的值。在普通函数中，如果没有return语句，就会返回undefined。

因此，还有另外的几种可行的写法:

component: () => {
  return import("../views/About.vue");
}

component() {
  return import("../views/About.vue");
}