Home > Web Front-end > Front-end Q&A > What's going on with vue page jump?

What's going on with vue page jump?

PHPz
Release: 2023-05-25 10:19:08
Original
756 people have browsed it

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
Copy after login
  1. 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
    }
  ]
})
Copy after login

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.

  1. 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>
Copy after login

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

  1. 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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template