How to pop up a prompt when vue jumps to a page

Vue is a very popular JavaScript framework for building interactive single-page web applications. Although Vue has many powerful features and easy-to-use APIs, when it is used with routing and navigation, sometimes it is necessary to find a way to pop up a prompt to let the user know what page they are about to visit.

In this article, we will explore a simple way to achieve this goal using Vue Router and Vue components.

Step One: Install Vue Router

Vue Router is a popular router library that provides routing functionality for Vue applications. In this article, we will use Vue Router to manage our application navigation.

In order to install Vue Router, you need to install it from npm. Please use the following command to install Vue Router in your application:

npm install vue-router --save

Once the installation is complete, import Router in your Vue component and configure it as part of the Vue application.

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

In the above code, we define two routes, one is the route pointing to the Home component, and the other is the route pointing to the About component. In this simple example, our application only has two pages, but you can add more pages and routes to tailor it to the needs of your project.

Step Two: Add Navigation Alert

Now that we have configured our Vue Router, we need a way to pop up a warning when the user wants to navigate to another page.

For this, we can use Vue Router’s navigation guard. Vue Router allows you to add routing middleware before or after routing changes. We will define a pre-routing guard that will be called before navigation and pop up an alert box to let the user know about the page they are about to visit.

router.beforeEach((to, from, next) => {
  if (to.name !== 'Home') {
    if (window.confirm('你确定要离开这个页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
})

In the above code, we define a beforeEach guard that will be called before each route transition. In this guard, we check if the user tries to navigate to any page other than the Home page. If so, we will pop up a warning box asking the user if they are sure about this action. If the user clicks confirm, they will be redirected to the new route. If the user clicks Cancel, the navigation will be canceled.

Finally, we need to use this route guard in the Vue component. We can do this by importing the router in the Vue component and adding a router hook function. Here is an example:

import router from './router'

export default {
  name: 'App',
  router,
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.name !== 'Home') {
        if (window.confirm('你确定要离开这个页面吗？')) {
          next()
        } else {
          next(false)
        }
      } else {
        next()
      }
    })
  }
}

In the above code, we have added the beforeEach route guard in the mounted method in the App component.

Conclusion

In this article, we introduced a simple way to implement navigation warnings using Vue Router and Vue components. While this approach is a bit cumbersome, it can provide your users with a safer and more reliable interactive experience. If you are using Vue and Vue Router, then use this method to add some extra security to your application.

The above is the detailed content of How to pop up a prompt when vue jumps to a page. For more information, please follow other related articles on the PHP Chinese website!