In my app user may dynamically set routing. For example he has three predefined components A, B and C; In the application (in browser :) he can manage route configuration; let's say there is a textarea with following JSON:

[{ path: "/my-custom-path", component: "A" }, { path: "/some/other/path/:id", component: "B" }, ...]

For now I can just add new routes to the router:

import A from '@/components/A';
import B from '@/components/B';
import C from '@/components/C';

const allComponents = { A, B, C }; 

// "routes" is array of routes provided by user/client in textarea (textarea is just an example :).
onConfigChanged = routes => {
  routes = routes.map(route => {
    return { path: route.path, component: allComponents[route.component] };
  });
  router.addRoutes(routes);
};

// onConfigChanged is called on each change to configuration by user/client

What I need is to completely replace all routes: router.replaceRoutes(routes) or maybe router.addRoutes(routes, { replace: true }) (it should completely replace routes configuration).

#1129 is close but it won't solve my problem because I don't know route names...

I know that this is not primary use-case for VueRouter, but it would allow to do more advanced things (like my use-case).

I like this feature request, I have uses cases where I need to replace url parameters dynamically just to generate a URL to share and grant a unique access for a view with data that I already have in memory (where I don't need view changes or async operations).

My application has different very routes for different user roles (some are replaced, some should be inaccessible or not exist at all). While it is already possible to achieve this using hooks and basic permissions definitions, I am interested in the idea of replacing the routes entirely on login/logout. The set of routes available could then be unique for each user role, and public/non-authenticated users.

I had my components depends on the api, and the api now needs to depend on the router,
however, the router has to depend on the components,
because of the new Router({ routes: [{ component }] }) syntax,
which causes a circular require now.

(the resolve => reuqire([path], resolve) syntax doesn't work for me.)

+1 for dynamic routes config, so I can export the router instance first.

Is there any intention of implementing this? It felt like there was some momentum on this for a while

My use case: Modular app, where you enable/disable modules (basically separate components, pages) that have pre-configured routes. Adding a route after enabling a module is ok, but when disabling module, previous routes need to be removed.

I agree this is needed. Imagine you implement a landing page that loads various apps dynamically, so that each app loaded would want to clear any previously loaded routes and load its own in. Also imagine that this information is sent up from the server dynamically.

This seems like a simple api of router.removeRoutes ([routeKeys]) or empty array to remove all.

The case for authorization-based (or capability-based) route definitions seems to be very common for sufficiently sophisticated apps.

In my case (somewhat similar to @nickforddesign's), I'd love to be able to start with a minimal set of public routes for unauthenticated users, and if they try to access any of the protected routes they get a 404 (or maybe redirected to login). Upon login, the server would respond with a list of accessible routes based on the current user role and/or app configuration.

All interceptors and authentications can be implemented with beforeEach hook, I still don't understand why you need add or replace routes dynamic.

@JounQin Please consider a client side plugin system that allows individual plugins to be disabled/enabled. When enabled, the routes provided by the plugin must be added to the system. When disabled, these routes need to be removed again in order for the application to fail consistently, namely with a 404 instead of continuing to render the components/views associated with that route.

An alternative, of course, would be to implement a beforeEnter hook which checks whether the route is available and redirecting to 404 instead when it is not.

@posva

Why would you ever need to delete a created route without adding a new one replacing it?
I think you may be interested in #1129

How could you implement this? Is it possible to create a new Router and assign it to the main app Router?

@limoli I had the same issue and solved it by replacing the router's matcher object with one from a newly created router instance.. something like:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history',
  routes: []
})

const router = createRouter()

export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // the relevant part
}

export default router

I'm really keen on having this feature. My app dynamically loads/unloads content, so if I unload a module, it'd be fantastic if it's be easy to unlink the routes (and redirect to my 404 or home page).
Edit: Router guards can work, but this would be much easier because I wouldn't need to have like 20 guards in place to accommodate all my separate modules... Oh, and I don't think we can dynamically add router guards?

@coxy great~ it works~

I have similar problem: I have many minis app with its routes: Content app, User app.
A main app, used and load these mini apps.
Main app load mini app asynchronously.

My goal is:

1. User wants to go "content/details/video_1"
2. Main app seeing the hash, knows that users wants to use mini app "Content". So, mini app "Content" and its routes are loaded?
3. If no, ok loaded component, apply routes and finally show the component

Below my code:
MAIN APP Router code:

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";

Vue.use(Router);

const loadSection = function(to, next) {
	//Load Content section:
	if (to.includes("/content")) {
		let promiseContent = import("dynamicImports/Content");
		promiseContent.then(
			(contentItem) => {
				contentItem = contentItem.default;
				//call init mini app (add routes mini app):
				contentItem.init(router);
				//After apply mini app routes, i must to force next(to)
                                //instead of next(). next() do nothing... bug???
                                 next(to);
			}
		);
	} else {
		next();
	}
};


const router = new Router({
	routes: [
		{
			path: "/",
			name: "HelloWorld",
			component: HelloWorld
		}
	]
});

router.beforeEach((to, from, next) => {
	if (router.match(to.path).matched.length === 0) {
		loadSection(to.path, next);
	} else {
		next();
	}
});

export default router;

MINI APPS EXPORT (dynamicImports/Content):

import RouterConfig from "router";
import MainApp from "components/app.vue";
import ContentDet from "components/contentDetails/ContentDetails.vue";

export const App = {
	component: MainApp,
	init: function(router:any) {
		//Add routes:
		router.addRoutes(RouterConfig);
	}
};

what do you think of this solution?

I don't understand why router.matcher = createRouter().matcher would have so many people agree, at least I did not succeed. vue 2.6.10, vue-router 3.1.2

And I tried to add a few more

const reset = () => {
  router.matcher = createRouter().matcher

  // Here's how to try it out

  router.addRoutes([...])

  // or

  router.options.routes = [...]
}

Why is there only one official addRoutes([]), even if it gives one more clear(), otherwise there will be a lot of duplicate routing warnings when adding?

The result is still not effective, but I feel that My problem this should be caused by the following problem.

asterisk(*) must be placed at the end

Generally, the initial router has * => 404. As a result, the route added by the subsequent router cannot be routed at all, so it can be solved by refreshing the page and creating again.

this is my code , success!!!

export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
router.options.routes = []
}

fail to use reset method with "router.matcher = newRouter.matcher" like @coxy
I lost all my router after reset, it seem dont't work :(

So @coxy method doesn't work anymore in the latest vue-router?

PS. I just tried - it works fine.

My apps are also authorisation-based and I would want to be able to enable/disable routes depending on signed-in/signed-out state. I will also be working on an app where modules are dynamically enabled or disabled, which means routes to them will need to be switched on and off for them as well.

I can find workarounds but in my view this should be solved in the router itself. It feels strange that it's only possible to add routes, never remove or rewrite them.

How this is fixed in 4.0? I don't see it implemented anywhere.

I'm also looking for a way to remove existing route and replace route functionality.

Also looking for this feature. Developing an app where the user and enable/disable modules, and each module has its own routes. Ideally when unloading a module the related routes should be disabled (so user goes to 404 instead of a non-functional component if they try to access it).

If we already have addRoutes() surely adding a clear() or a remove() should be a trivial new feature to add.. ?

Why do you need a delete routing feature?
Shouldn't most privileged routes be configured by the server?

your router.js may only have this code

// router.js
{
  path: '/login',
  component: () => import('@/views/login/index')
},
{
  path: '/register',
  component: () => import('@/views/register/index')
},
{
  path: '/404',
  component: () => import('@/views/error-page/404')
},
{
  path: '*',
  redirect: '/404'
}

When a user logs into your web application with an account and password, he or she immediately requests a menu data from the server, which you then consolidate into your local router area using addRouter :

import router from './router.js'

// after the server requests the menu data based on the current user information
// `accessRoutes ` It's an array , It's an routers
router.addRoutes(accessRoutes)

My users also logout. I need to reset the routes to the logged-out state after that.

I have another use case where users can create and delete objects which map to routes in the UI. The server also notifies the UI if another user in the same group has made these types of changes. I.e. the routes need to be dynamically updated through user actions.

Hi,
I have solved how to check if a route is from a different project in the same host without the need of replacing routes (the routes of the projects don't overlap).

It consists on checking the path on the url against the routes of the router.

In the App.vue:

      mounted(){
          this.checkIfWeComeFromDifferentProject()
      },

      methods:{
        checkIfWeComeFromDifferentProject(){
            if(this.checkRouteOfThisProject()){
                this.confirmLogout() //here is where you logout the user manually instead of having them do it
            }
        },
        getRouteCorePath (route) {
            route = route.slice(1)// remove first slash "/"
            //remove /:id from pages like "/vehicles/1"
            let indexOfSlash = route.indexOf('/')
            if (indexOfSlash > 0) {
                route = route.substr(0, indexOfSlash)
            }
            return route
        },
        checkRouteOfThisProject(){
            var This = this
            var found = this.$router.options.routes.find(route=>{
                var iteratedPathToCheck = This.getRouteCorePath(route.path)
                var currentRouterPathToCheck = This.getRouteCorePath(This.$route.path)
                return iteratedPathToCheck == currentRouterPathToCheck
            })
            return !found
        },
      },

    watch:{
        $route (to, from){
            this.checkIfWeComeFromDifferentProject()
        }
    }

Cheers,

Another usecase: oversimplifying a lot for demo purposes but let's say that I have basically 2 apps running while migrating a codebase: legacy(not-vue) to next (vue) and they both map the same urls for user convenience while sharing links in this transition period. So myapp.com/some-page will render either a legacy app view or a next app view based on a user featureFlag (like a beta testing, but remember they use the same url!!) so picture an incremental migration.

// inital router.js
const routes = [...alreadyMigratedNextRoutes] // already battle-tested vue routes no longer under the featureFlag, no more legacy views fallback
const router = new VueRouter({ routes })

// some data fetching work...

if (store.state.curAccount.featureFlag) {
  router.addRoutes(underTestingNextRoutes) // the ones with the same paths as legacy views, now curAccount will get `next` views
} 

// else do nothing (as in navigating to those paths will load the `legacy` app versions
// voilá this works

The problem is that switching accounts on the app (meaning no page reload) and assuming curAccount had featureFlag === true and we switch to account_b has the featureFlag === false, means that I need to remove underTestingNextRoutes from the router routes array so that account_b effectively sees the legacy app view when navigating to that url.

// pseudoCode for some selectbox

onSwitchAccounts(targetAccount) {
  this.$store.dispatch('fetchAccount', targetAccount).then((accountBPayloadj) => {
      this.$store.commit('UPDATE_CUR_ACCOUNT', accountBPayload)
       
      if (accountBPayload.featureFlag === false) {
         // yup would be handy
         this.$router.removeRoutes(underTestingNextRoutes)

        // Now if accountB goes to `myapp.com/some-page`, it should see the `legacy` version.
      }
   })
}
 

Does this make sense on why I can't simply use router hook/guard? In practice i want to redirect... to the same url.

Note that i'm not saying there isn't another way of doing it, and yes "you should just use a next.myapp.com" are expected (reddit) counter-arguments. I'm just trying to express what it seems to be a practical use-case for the feature.

✌️ ☮️

@posva It says you added fixed in 4.x but can you link to a commit/documentation so we can know how to use it and close this issue if it solves it?

@redfox05 it's here: https://github.com/vuejs/router for Vue 3

@posva Thanks, was hoping for a commit hash or link to documentation, but understand you're probably busy.

For others interested in the information, I managed to find the docs for it here: https://next.router.vuejs.org/guide/advanced/dynamic-routing.html#removing-routes

I was surprised this issue was not linked to a commit when the feature was implemented, and this issue is still Open, so figured it was not fully complete? Hence I tried looking for a commit hash but couldn't find one. Hopefully the docs will be enough for people.

Only according to the name to delete the router now? How to delete the router by path？

Really, how does one remove unnamed route?

The reason this feature is no only a good idea but a must have, is because the nested routes behave very buggy, every time you go in and out and of the nested child of the route, and the route no even takes you where you want to go instead it take you to the last visited child of the parent.

This make navigation and routing very unpredictable and impossible to work with.

使用addRoute回调, 可以实现删除路由, 官网查看

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话