How to pass new page through button in vue

In Vue, we can jump between pages through routing. In this article, we will explore how to pass to a new page using buttons in Vue. We will use Vue Router, Vue’s official router plugin.

Vue Router is the official router of Vue.js. It allows us to set up routing tables that map some URLs to Vue components. This way we can navigate to different pages via URL. Let's install Vue Router first.

Install Vue Router

To use Vue Router, we first need to install it. It can be installed using npm or yarn.

Use npm:

npm install vue-router

Use yarn:

yarn add vue-router

Use Vue Router in Vue project

After installing Vue Router, we need to use it. To use Vue Router in a Vue project, you need to introduce Vue Router in main.js and use it.

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ...
  ]
})

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

In the above code, we first introduced Vue and Vue Router in main.js. Then, we tell Vue to use Vue Router through Vue.use(VueRouter). Next, we create a VueRouter instance and pass some routing rules to it. Finally, we pass this VueRouter instance to the router option of the Vue instance. In this way, Vue Router can work in our application.

Set routing

In Vue Router, we can use the routes attribute to set routing.

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

In the above code, we set two paths, '/' and '/about' in the routes attribute. When we access these paths, Vue Router will render the component corresponding to the path.

Pass parameters

In Vue Router, we can pass data through URL parameters. We can add parameters in the URL and these parameters will be passed to the components we define.

For example, if we want to pass a parameter named id, we can set the route like this:

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

In this route, we use the ':id' setting parameters. This parameter will be passed to our component User.

In the User component, we can access this parameter through $route.params.id. For example:

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

In the above code, we use $route.params.id to access the parameters we passed.

Forward and Backward

Vue Router also supports forward and backward functions. We can use the $router.go() method to achieve forward and backward. For example:

<template>
  <div>
    <button @click="$router.go(-1)">Back</button>
    <button @click="$router.go(1)">Foward</button>
  </div>
</template>

In the above code, we created two buttons. One for going backward and one for going forward. When these buttons are clicked, we call the $router.go() method, passing a numeric parameter. This number represents the number of steps we want to go forward or backward. Negative numbers mean going backward, positive numbers mean going forward.

Summary

In this article, we learned how to use Vue Router to set up routes, pass parameters, and go forward and backward. Through these methods, we can easily jump between pages in the Vue project.

The above is the detailed content of How to pass new page through button in vue. For more information, please follow other related articles on the PHP Chinese website!