vuejs · a11302482 · Sep 19, 2019 · Sep 19, 2019
diff --git a/examples/remove-routes/app.js b/examples/remove-routes/app.js
@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/foo', component: Foo }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Add and Remove Routes</h1>
+      <ul>
+        <li><router-link to="/foo">/foo</router-link></li>
+        <li><router-link to="/bar">/bar</router-link></li>
+      </ul>
+      <button id="add-btn" @click="addRouteBar">Add Route Bar</button>
+      <button id="remove-btn" @click="removeRouteBar">Remove Route Bar</button>
+      <router-view class="view"></router-view>
+    </div>
+  `,
+  methods: {
+    addRouteBar () {
+      this.$router.addRoutes([{ path: '/bar', component: Bar }])
+    },
+    removeRouteBar () {
+      this.$router.updateRoutes([{ path: '/bar' }])
+    }
+  }
+}).$mount('#app')
diff --git a/examples/remove-routes/index.html b/examples/remove-routes/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/remove-routes.js"></script>
diff --git a/src/create-matcher.js b/src/create-matcher.js
@@ -5,12 +5,13 @@ import { resolvePath } from './util/path'
 import { assert, warn } from './util/warn'
 import { createRoute } from './util/route'
 import { fillParams } from './util/params'
-import { createRouteMap } from './create-route-map'
+import { createRouteMap, removeRoutesFromMap } from './create-route-map'
 import { normalizeLocation } from './util/location'
 
 export type Matcher = {
   match: (raw: RawLocation, current?: Route, redirectedFrom?: Location) => Route;
   addRoutes: (routes: Array<RouteConfig>) => void;
+  removeRoutes: (routes: Array<RouteConfig>) => void;
 };
 
 export function createMatcher (
@@ -22,6 +23,9 @@ export function createMatcher (
   function addRoutes (routes) {
     createRouteMap(routes, pathList, pathMap, nameMap)
   }
+  function removeRoutes (routes) {
+    removeRoutesFromMap(routes, pathList, pathMap, nameMap)
+  }
 
   function match (
     raw: RawLocation,
@@ -166,7 +170,8 @@ export function createMatcher (
 
   return {
     match,
-    addRoutes
+    addRoutes,
+    removeRoutes
   }
 }
 

diff --git a/src/create-route-map.js b/src/create-route-map.js
@@ -203,3 +203,78 @@ function normalizePath (
   if (parent == null) return path
   return cleanPath(`${parent.path}/${path}`)
 }
+
+export function removeRoutesFromMap (
+  routes: Array<RouteConfig>,
+  pathList: Array<string>,
+  pathMap: Dictionary<RouteRecord>,
+  nameMap: Dictionary<RouteRecord>
+) {
+  routes.forEach(route => {
+    removeRouteRecord(pathList, pathMap, nameMap, route)
+  })
+
+  // ensure wildcard routes are always at the end
+  for (let i = 0, l = pathList.length; i < l; i++) {
+    if (pathList[i] === '*') {
+      pathList.push(pathList.splice(i, 1)[0])
+      l--
+      i--
+    }
+  }
+}
+
+function removeRouteRecord (
+  pathList: Array<string>,
+  pathMap: Dictionary<RouteRecord>,
+  nameMap: Dictionary<RouteRecord>,
+  route: RouteConfig,
+  parent?: RouteRecord,
+  matchAs?: string
+) {
+  const { path, name } = route
+  const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
+  const normalizedPath = normalizePath(
+    path,
+    parent,
+    pathToRegexpOptions.strict
+  )
+
+  if (route.children) {
+    route.children.forEach(child => {
+      const childMatchAs = matchAs
+        ? cleanPath(`${matchAs}/${child.path}`)
+        : undefined
+      removeRouteRecord(pathList, pathMap, nameMap, child, { path: normalizedPath }, childMatchAs)
+    })
+  }
+
+  if (route.alias !== undefined) {
+    const aliases = Array.isArray(route.alias)
+      ? route.alias
+      : [route.alias]
+
+    aliases.forEach(alias => {
+      const aliasRoute = {
+        path: alias,
+        children: route.children
+      }
+      removeRouteRecord(
+        pathList,
+        pathMap,
+        nameMap,
+        aliasRoute,
+        parent,
+        normalizedPath || '/' // matchAs
+      )
+    })
+  }
+  const index = pathList.indexOf(normalizedPath)
+  if (index > -1) {
+    pathList.splice(index, 1)
+    delete pathMap[normalizedPath]
+    if (name) {
+      delete nameMap[name]
+    }
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -239,6 +239,12 @@ export default class VueRouter {
       this.history.transitionTo(this.history.getCurrentLocation())
     }
   }
+  removeRoutes (routes: Array<RouteConfig>) {
+    this.matcher.removeRoutes(routes)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
 }
 
 function registerHook (list: Array<any>, fn: Function): Function {

diff --git a/test/e2e/specs/remove-routes.js b/test/e2e/specs/remove-routes.js
@@ -0,0 +1,41 @@
+const bsStatus = require('../browserstack-send-status')
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['history'],
+
+  removeroutes: function (browser) {
+    browser
+      .url('http://localhost:8080/remove-routes/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li', 2)
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/remove-routes/foo')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/remove-routes/bar')
+      .assert.urlEquals('http://localhost:8080/remove-routes/')
+
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/remove-routes/bar')
+      .assert.elementNotPresent('.view')
+
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/remove-routes/foo')
+      .assert.containsText('.view', 'foo')
+
+      .click('#add-btn')
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/remove-routes/bar')
+      .assert.containsText('.view', 'bar')
+
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/remove-routes/foo')
+      .assert.containsText('.view', 'foo')
+
+      .click('#remove-btn')
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/remove-routes/bar')
+      .assert.containsText('.view', '')
+
+      .end()
+  }
+}