Several ways to jump in Vue routing

In Vue.js, routing is a very important concept. It allows us to display different content based on different URL addresses. In Vue.js, we can access different components or pages through routing addresses. In this article, we will introduce several ways to route jumps in Vue.js.

1. Use the router-link component to implement routing jump

router-link is the built-in routing jump component of Vue.js. It provides a tag to access different links, and passes the URL address to the router-view component to display the corresponding page. We can use the router-link component in the template to jump between pages.

The following is a sample code that uses the router-link component to jump to other pages:

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

In the above code, we use two router-link components. The to attribute is used to specify the routing address of the jump. For example, to="/about" means to jump to the About Us page. When we click the tag, Vue.js will match the routing address and display the corresponding component based on the value of the to attribute.

2. Use programmatic navigation in Vue.js to implement route jumps

In addition to using the router-link component for route jumps, Vue.js also provides a programmatic Navigation method to perform route jump. Programmatic navigation implements routing jumps through JavaScript code, which allows us to jump directly to specified pages in the code.

The following is a sample code for using programmatic navigation in Vue.js to implement route jumps:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

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

In the above code, we use two buttons to implement route jumps. When we click the button, call the goHome or goAbout method to implement the routing jump. In Vue.js, we can access the routing object through this.$router and call the push() method to implement route jump. When we call the push() method and pass in the target routing address, Vue.js will automatically match the routing address and display the corresponding component.

3. Use the router.push() method to implement route jump

In addition to using the $this.$router.push() method to implement route jump, Vue.js also provides A router.push() method to perform routing jumps. Compared with the $this.$router.push() method, the router.push() method is more direct and allows us to control the routing jump behavior more finely.

The following is a sample code that uses the router.push() method to implement route jump:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

In the above code, we use the router.push() method to implement the jump. We can pass a string or an object to specify the destination routing address. In the example above, we passed an object specifying the routing address and name for our page.

Summary

In Vue.js, routing is a very important concept. In actual development, we need to choose the appropriate route jump method based on the actual situation. The router-link component and programmatic navigation are both commonly used routing jump methods, which can meet most development needs. If we need to control the behavior of routing jumps more finely, we can use the router.push() method to implement routing jumps.

The above is the detailed content of Several ways to jump in Vue routing. For more information, please follow other related articles on the PHP Chinese website!