In Vue.js, how do you prevent navigation for a subroute?

问题

The nice thing about beforeRouteLeave is that you can prevent navigating away under certain conditions.

I have a setup that uses a subroute to render part of the page. I would like a navigation guard on the subroute to prevent switching to another one if the data is not saved.

{
    path: '/customers/view',
    component: ViewCustomerShell,
    children: [
        {path: ':id', name: 'ViewCustomer', component: ViewCustomer}
    ]
},

So when I visit /customers/view/12 and make a change, if they try to load /customers/view/13, I want to pop up the usual confirmation and potentially stop navigation. Since beforeRouteLeave is not called in this situation, what is the recommended approach for preventing navigation? It seems that watching $route would be too late, because then the navigation has already occurred.

Note: As mentioned above, beforeRouteLeave is not called in this situation; it doesn't work.

Note: Using 'onbeforeunload' doesn't work because it only triggers when the entire page changes.

回答1:

You could use a $route object inside your component to watch if it changes and then raise up the confirmation modal... This will get called whenever your route changes!

const Baz = {
  data () {
    return { saved: false }
  },
  template: `
    <div>
      <p>baz ({{ saved ? 'saved' : 'not saved' }})<p>
      <button @click="saved = true">save</button>
    </div>
  `,

  watch: {
    '$route': function () {
      if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
      // do something ...
    }
  }
}

回答2:

I have also posted the same answer here.

Dynamic route matching is specifically designed to make different paths or URLs map to the same route or component. Therefor, changing the argument does not technically count as leaving (or changing) the route, therefor beforeRouteLeave rightly does not get fired.

However, I suggest that one can make the component corresponding to the route responsible for detecting changes in the argument. Basically, whenever the argument changes, record the change then reverse it (hopefully reversal will be fast enough that it gets unnoticed by the user), then ask for confirmation. If user confirms the change, then use your record to "unreverse" the change, but if the user does not confirm, then keep things as they are (do not reverse the reverse).

I have not tested this personally and therefor I do not gurantee it to work, but hopefully it would have cleared up any confusion as to which part of the app is responsible for checking what change.

来源：https://stackoverflow.com/questions/39900517/in-vue-js-how-do-you-prevent-navigation-for-a-subroute