How to use programmatic navigation in Vue Router?

Vue Router is a routing management plug-in officially provided by Vue.js. It allows us to manage the rendering and navigation of different components through URL paths. Among them, programmatic navigation is an important function provided by Vue Router, which controls routing jumps and navigation operations through code.

In Vue Router, programmatic navigation can be achieved through the method of $route object. We can jump to the page by calling these methods, which include router.push, router.replace and router.go. Let's take a look at the specific usage.

First, we need to create a Vue Router instance based on the vue-router library and inject it into the Vue instance. When creating a Vue Router instance, we need to configure routing mapping and specify the components corresponding to different paths. For example:

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

// 使用Vue Router插件
Vue.use(VueRouter)

// 创建Vue Router实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

// 注入Vue实例
new Vue({
  router,
  el: '#app',
  // ...
})

After having a Vue Router instance, we can use programmatic navigation to jump to pages. Below we introduce the usage of the three methods router.push, router.replace and router.go respectively.

1. router.push

router.push method can be used to jump to the specified path and add the The path is added to the browser's access history. The following example demonstrates the process of jumping to the About page through the router.push method after clicking the button:

// template
<template>
  <div>
    <button @click="goAbout">Go to About</button>
  </div>
</template>

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

2. router.replace

router.replaceThe method is used to jump to the specified path, but will not add new records to the browser access history. The following example demonstrates the process of jumping to the About page through the router.replace method after clicking the button:

// template
<template>
  <div>
    <button @click="replaceAbout">Replace with About</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    replaceAbout() {
      this.$router.replace('/about')
    }
  }
}
</script>

3. router.go

router.go method can navigate forward or backward in the browser's access history. By passing in a negative number, you can indicate backward navigation. After clicking the button, pass router .go(-1)Realizes the effect of returning to the previous page.

// template
<template>
  <div>
    <button @click="goBack">Go Back</button>
  </div>
</template>

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

Through these three programmatic navigation methods, we can achieve page jumps and navigation operations in different scenarios. In specific use, we only need to choose the appropriate method according to the needs and pass the target path as a parameter to the corresponding method.

To summarize, Vue Router's programmatic navigation provides us with a way to control routing jumps and navigation through code. Through the three methods router.push, router.replace and router.go, we can implement functions such as page jumps and historical navigation. In actual development, we can choose the appropriate method according to specific needs and combine it with the interaction of components to achieve a rich navigation experience.

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