Vue-Router: How to use programmatic navigation in a Vue application?

Vue-Router: How to use programmatic navigation in a Vue application?

Vue-Router is the routing manager officially provided by Vue.js. It allows us to manage the routing mapping relationship between pages in the application and achieve the effect of a single-page application. In Vue-Router, navigation is divided into two types: declarative navigation and programmatic navigation.

Declarative navigation defines navigation links by using the component, which is essentially a Vue component. We can use the to attribute in to specify the navigation link, and Vue-Router will automatically map the to attribute to a route in the application.

Programmatic navigation implements navigation by writing JavaScript code. It allows developers to directly call the API provided by Vue-Router in code to implement page navigation. Programmatic navigation can provide a more flexible way when dynamic navigation in a Vue application or business logic control in the application is required.

Below, we will use some code examples to demonstrate Vue-Router’s programmatic navigation implementation method.

1. Jump to the specified route

To jump to the specified route, we can use the $router.push method provided by Vue-Router. This method accepts a path or named route as a parameter and navigates to the specified path or route.

<template>
  <div>
    <button @click="goHome">返回主页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

In the above code, we provide a button. When the button is clicked, the goHome method is called to navigate the route to the home page.

Similar to the push method, Vue-Router also provides the $router.replace method, which can directly replace the current URL without leaving a history record. This is used when you need to jump from one page to another.

2. Jump to the previous route

When we need to jump to the previous route, we can use the $router.back method provided by Vue-Router. This method navigates to the previous route in the application's history.

<template>
  <div>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

3. Jump to the next route

Similar to jumping to the previous route, we can use the $router.forward method provided by Vue-Router to navigate Go to the next route in the application history.

<template>
  <div>
    <button @click="goForward">前往下一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goForward() {
      this.$router.forward()
    }
  }
}
</script>

4. Jump to named route

In Vue-Router, we can set a name for the route. If we need to navigate to a named route, we can use the $router.push method provided by Vue-Router and pass in a name as a parameter.

<template>
  <div>
    <button @click="goToAbout">前往关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}
</script>

In the above code, we provide a button. When the button is clicked, the goToAbout method is called to navigate the route to the About page. The path to the About page is set by calling the named routing configuration of Vue-Router. of.

Summary

In Vue-Router, programmatic navigation provides a more flexible and dynamic route management method. We can use APIs provided by Vue-Router such as $router.push, $router.replace, $router.back, and $router.forward to jump. At the same time, we can also use named routes for navigation. When using programmatic navigation, you need to be aware that navigation operations may trigger page re-rendering, and avoid causing unexpected behavior in navigation operations.

The above is the detailed content of Vue-Router: How to use programmatic navigation in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!