feat: support prefetch and prefetchFiles on route object

Author: egoist

README.md

@@ -59,13 +59,41 @@ All [props](https://router.vuejs.org/api/#router-link-props) of `<router-link>`
 
 Whether to prefetch the matched route component.
 
+You can also set `meta.prefetch` on vue-router's `route` object to disable prefetching this route for all `<router-link>`s:
+
+```js
+new VueRouter({
+  routes: [
+    {
+      path: '/some-async-page',
+      meta: { prefetch: false },
+      component: () => import('./async-page.vue')
+    }
+  ]
+})
+```
+
 ### prefetchFiles
 
 - Type: `string[]`
 - Examples: `['/foo.css']`
 
 A list of additional files to prefetch. By default we only prefetch the route component.
 
+You can also set `meta.prefetchFiles` on vue-router's `route` object, it will be merged with the prop value:
+
+```js
+new VueRouter({
+  routes: [
+    {
+      path: '/some-async-page',
+      meta: { prefetchFiles: ['/foo.css'] },
+      component: () => import('./async-page.vue')
+    }
+  ]
+})
+```
+
 ### timeout
 
 - Type: `number`

example/async-page.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Async Page</h1>
+    <router-link to="/">Home</router-link>
+  </div>
+</template>

example/index.js

@@ -29,9 +29,15 @@ const Nav = {
           <li>
             <router-link to="/page/5">page 5</router-link>
           </li>
+          <li>
+            <router-link to="/async-page">async-page</router-link>
+          </li>
           <li>
             <router-link to="/page/6">page 6</router-link>
           </li>
+          <li>
+            <router-link to="/page/1">page 1</router-link>
+          </li>
         </ul>
       </div>
     )
@@ -66,6 +72,16 @@ const router = new Router({
           )
         }
       }
+    },
+    {
+      path: '/async-page',
+      meta: {
+        prefetch(route) {
+          console.log(route)
+        }
+      },
+      component: () =>
+        import(/* webpackChunkName: "async-page" */ './async-page.vue')
     }
   ]
 })

package.json

@@ -22,6 +22,7 @@
   "author": "egoist<[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "bili": "^4.0.9",
     "commitizen": "^3.0.5",
     "cz-conventional-changelog": "^2.1.0",
@@ -40,6 +41,11 @@
     "xo": "^0.23.0"
   },
   "xo": {
+    "parserOptions": {
+      "parser": "babel-eslint",
+      "ecmaVersion": 2017,
+      "sourceType": "module"
+    },
     "extends": [
       "rem",
       "plugin:vue/recommended",

src/index.js

@@ -71,21 +71,36 @@ function installRouterPrefetch(Vue, { componentName = 'RouterLink' } = {}) {
       },
       getComponents() {
         return this.$router.getMatchedComponents(this.to).filter(Component => {
-          return typeof Component === 'function' && !Component._prefetched
+          return typeof Component === 'function'
         })
       },
       linkPrefetch() {
-        // Prefetch route component
-        const components = this.getComponents()
-        for (const Component of components) {
-          this.$emit('prefetch', this.to)
-          Component() // eslint-disable-line new-cap
-          Component._prefetched = true
+        const { route } = this.$router.resolve(this.to)
+
+        if (route.meta.__prefetched) return
+
+        route.meta.__prefetched = true
+
+        if (route.meta.prefetch !== false) {
+          // Prefetch route component
+          const components = this.getComponents()
+          for (const Component of components) {
+            this.$emit('prefetch', this.to)
+            Component() // eslint-disable-line new-cap
+          }
+        }
+
+        if (typeof route.meta.prefetch === 'function') {
+          route.meta.prefetch(route)
         }
 
         // Prefetch addtional files
-        if (this.prefetchFiles) {
-          for (const file of this.prefetchFiles) {
+        const prefetchFiles = [
+          ...(this.prefetchFiles || []),
+          ...(route.meta.prefetchFiles || [])
+        ]
+        if (prefetchFiles.length > 0) {
+          for (const file of prefetchFiles) {
             prefetch(file)
           }
         }

yarn.lock

@@ -232,6 +232,11 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.3.2.tgz#95cdeddfc3992a6ca2a1315191c1679ca32c55cd"
+  integrity sha512-QzNUC2RO1gadg+fs21fi0Uu0OuGNzRKEmgCxoLNzbCdoprLwjfmZwzUrpUNfJPaVRwBpDY47A17yYEGWyRelnQ==
+
 "@babel/parser@^7.2.2", "@babel/parser@^7.2.3":
   version "7.3.1"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.3.1.tgz#8f4ffd45f779e6132780835ffa7a215fa0b2d181"
@@ -707,7 +712,7 @@
     "@babel/parser" "^7.2.2"
     "@babel/types" "^7.2.2"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.2.2", "@babel/traverse@^7.2.3":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.2.2", "@babel/traverse@^7.2.3":
   version "7.2.3"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.2.3.tgz#7ff50cefa9c7c0bd2d81231fdac122f3957748d8"
   integrity sha512-Z31oUD/fJvEWVR0lNZtfgvVt512ForCTNKYcJBGbPb1QZfve4WGH8Wsy7+Mev33/45fhP/hwQtvgusNdcCMgSw==
@@ -1457,6 +1462,18 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
+babel-eslint@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
+  integrity sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-scope "3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
 babel-helper-vue-jsx-merge-props@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
@@ -3669,6 +3686,14 @@ eslint-plugin-vue@^5.1.0:
   dependencies:
     vue-eslint-parser "^4.0.2"
 
+[email protected]:
+  version "3.7.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-scope@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"