How to jump between two routes in Vue (a brief analysis of the method)

Vue is a very popular JavaScript framework that allows us to improve development efficiency by building componentized web applications. The routing system of Vue.js allows us to navigate between different pages. This article will introduce how to jump between two Vue routes.

Vue’s routing is completed through the vue-router plug-in. The vue-router plugin provides a router instance that allows us to define and manage our application's routes. In order to use vue-router, we need to introduce it in the Vue application.

Define the route

First, define the route in the Vue application. The way to define routes is by defining Vue Router's route mapping. It specifies the mapping between URL paths and Vue components. Route mapping can be defined through the routes attribute of the vue-router instance.

For example, create a Vue component named "Home":

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

Then we can define a route in the routing map and point the home page path to the Home component:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

In the above code, we first use the import statement to import the Vue and Vue Router libraries and Home components. Next, register the Vue Router into the Vue application through the Vue.use() call. Then define a routing map routes, which contains a path item to define the URL path, and a component item to specify the Vue component of the corresponding path. Finally, we create a router instance and pass it to the Vue instance.

Using route jump

Now that we have created the route map and defined the route, the next step is how to perform route jump. Vue Router provides two types of jumps: declarative navigation and programmatic navigation.

Declarative Navigation

Declarative navigation refers to using the component in the Vue component to jump to another route. For example, use the tag in the Home component to jump to the About component:

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">About Page</router-link>
  </div>
</template>

Here, we use the to attribute to specify the path to the jump target route. Vue resolves the to attribute as a full path to another route.

Programmatic Navigation

Programmatic navigation uses the $router method in the Vue Router instance to jump between routes. For example, in the Home component, we can use the $router.push method to jump to the About component:

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

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

Here, we define a gotoAbout method, in which the $router.push method is used to jump the route Go to destination route.

Summary

Through the above two methods, we can realize the jump between two Vue routes. Declarative navigation and programmatic navigation are both commonly used routing jump methods in Vue Router. In actual development, we can choose different methods according to specific scenarios.

The above is the detailed content of How to jump between two routes in Vue (a brief analysis of the method). For more information, please follow other related articles on the PHP Chinese website!