change current component used by `router-view` without changing current URL

[jiangfengming]

The scenario is, when fetching data from backend api failed, I want to route to an error page, but not changing the current location, and prompt the user that you could refresh the page to try again. If the location changed, refreshing the page would always on the error page. Another common usage is showing the login page if user is not logged in, but do not redirect to a login URL.

I know I can achieve it via putting a piece of code into App.vue:

<component :is="forceShowPage" v-if="forceShowPage"></component>
<router-view v-else></router-view>

But then these pages can't reuse the layout components that using nested routes.

Proposed API

A prop named route for <RouterView> that allows overriding what is displayed, like in v4 (https://next.router.vuejs.org/api/#route). There are existing tests in https://github.com/vuejs/vue-router-next/tree/master/e2e/modal

[jiangfengming]

@fnlctrl I think you misunderstood my meaning, I means "Trigger router-view change without changing current URL"

[posva]

@fenivana Sorry for the delay. In that case, it looks like a very app-specific behaviour. I actually prefer giving the user a clickable link that brings him to the right place (or something like try again) instead of asking him to reload the page.
BTW you can also do router.history.updateRoute({ path: '/error' }) or use it with a name

[jiangfengming]

@posva The point is the current URL should not change, rather than a URL like http://www.example.com/error. Error page should works like the 404 page, it doesn't need a visible URL.

And I've tried your suggestion in Chrome console but without success:

> $vm0.$router.history.updateRoute({ path: '/foo' })

[Vue warn]: Error when rendering root instance:                 vue.runtime.common.js?d43f:509
  warn @ vue.runtime.common.js?d43f:509
  Vue._render @ vue.runtime.common.js?d43f:2932
  (anonymous function) @ vue.runtime.common.js?d43f:2333
  get @ vue.runtime.common.js?d43f:1639
  run @ vue.runtime.common.js?d43f:1708
  flushSchedulerQueue @ vue.runtime.common.js?d43f:1526
  (anonymous function) @ vue.runtime.common.js?d43f:461
  nextTickHandler @ vue.runtime.common.js?d43f:410


TypeError: Cannot read property '0' of undefined(…)             vue.runtime.common.js?d43f:423
  logError @ vue.runtime.common.js?d43f:423

[posva]

Oh, sorry. It actually needs more parameters. The path being one of them and name being optional actually xD

vue-router/flow/declarations.js

Line 67 in 154e269

declare type Route = {

[posva]

I think it's a useful feature. We could expose a method on the router instance:

router.replaceView({ name: 'error' })

and add support for the name syntax too (as a router-link)

It also makes easier to handle graceful degradation. So basically what we actually need is a way to modify the navigation to a different view while keeping the url. Most of the time this is something that would be used in the before* guard, isn't it? So we could use some kind of property on the object passed to the next method. Something similar to replace: true. Let's say replace: { name: 'error' } that would only replace the view. Adding a new property can be confusing because they cannot be used together (we can always warn the user in dev mode, though).

@fnlctrl @yyx990803 What do you think? I'm not satisfied with the API below because of the 2 different ways of doing it --> People may want to use the callback to replace the view: vm => vm.$router.replaceView({})
Maybe we should introduce a new kind of route that cannot be directly navigated but that can be used to replace the view of another route

[fnlctrl]

Maybe we should introduce a new kind of route that cannot be directly navigated but that can be used to replace the view of another route

Hmm.. Maybe we can directly pass components instead of routes to router.replaceView? This way we don't have the problem you proposed. Since the replaced view doesn't affect url, so should it be totally unrelated to routes. (And maybe the replaced view shouldn't have nested router-views in it.)

import FooView from 'foo';
router.replaceView(FooView)

router.replaceView(Vue.component('regiesterd-global-component'))

The only problem would be importing the components everywhere router.replaceView(Foo) is used, but it shouldn't be too much trouble, and no trouble at all if it's used inside global guards.

import FooView from 'foo';
import BarView from 'foo';

const router = new VueRouter({routes: [
  {path: '/foo', component: FooView},
  {path: '/bar', component: BarView}
]})

router.beforeEach(() => {
   //...
   router.replaceView(FooView)
})

[jiangfengming]

I think we can add a abstract option in the route definition. If it is set to true, then <router-link>, router.push() and router.replace() will not change the URL, just like the current abstract mode.

new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: () => System.import('./layouts/default.vue'),
      children: [
        { path: '', component: () => System.import('./views/Index.vue') },
        { path: 'foo', component: () => System.import('./views/Foo.vue') },
        { path: 'login', abstract: true, component: () => System.import('./views/Login.vue') },
        { path: 'error', abstract: true, component: () => System.import('./views/Error.vue') },
        { path: '*', component: () => System.import('./views/HTTP404.vue') }
      ]
    }
  ]
})

Here page login and error are defined as abstract routes.

[yyx990803]

It still feels like a hack to me. This is basically a piece of global state (showErrorOverlay) that is not stored in the URL, why does it have to be done through a router API?

I'm not sure if I understand what you mean by the following:

But then these pages can't reuse the layout components that using nested routes.

[wmcmurray]

Yes ! I want this feature please 🙂
It doesn't have to be complicated, adding a method :

router.replaceView(my404PageComponent);

would be just fine (in my humble opinion).

[EduardoRFS]

@yyx990803 because the router API choose the actual view, we need only to replace the view, by another component, when a error occur, like in a classic mvc if a entry dont exist pass to other view

why does it have to be done through a router API?

[jiangfengming]

These days I'm facing the problem again. I did what @yyx990803 suggested to switch <router-view> and error page in layout.vue, that works well.

But the problem is when clicking back on the login page, it will back to the last second page, because the login page actually isn't in the history stack. I have to hack on the history.pushState() and onpopstate . The basic idea is, when opening the login page, I use history.pushState({ dummy: true }, ''). When clicking back, I remove the dummy history and slide out the login page. When refreshing on the login page, I need to remove the dummy history.

I haven't done yet ,so I don't know whether it will work.