What's going on with vue page jump?

Vue is a modern JavaScript framework commonly used to build single-page applications (SPA). SPA allows users to navigate different pages and page components without reloading the entire page. In Vue, page jumps are mainly implemented through routing.

Routing is a mechanism that maps URIs to components. A URI is part of a URL, such as "https://example.com/user/123". The /user/123 part of the URI is called the routing path. In Vue, routing is implemented through Vue Router.

Vue Router is the official routing manager of Vue.js. Using Vue Router, you can define routes and map routing paths to Vue components. Vue Router also provides route navigation functionality, enabling users to navigate to different pages and page components without reloading the entire page. Route navigation can be implemented through links (such as ) or programmatically (such as this.$router.push('/')).

The basic usage of Vue Router is as follows:

1. Install Vue Router

npm install vue-router

2. Create route

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 create two routes: "home" and "about", which are mapped to the Home and About components respectively. The routing paths are "/" and "/about" respectively.

3. Using routing in Vue components

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

    <router-view></router-view>
  </div>
</template>

In the above code, we use the <router-link></router-link> component to create the routing link , and use the <router-view></router-view> component to render the component matching the current route.

4. Navigate to different routes

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

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

In the above code, we navigate to different routes programmatically. Use the this.$router.push() method to change the current routing path to a new path.

In short, Vue Router provides a flexible and easy-to-use routing mechanism. By defining routes and mapping route paths to Vue components, we can create single page applications and allow users to navigate to different pages and page components without reloading the entire page.

The above is the detailed content of What's going on with vue page jump?. For more information, please follow other related articles on the PHP Chinese website!