How to use routing to implement page jump in Vue?

How to use routing to achieve page jump in Vue?

With the continuous development of front-end development technology, Vue.js has become one of the most popular front-end frameworks. In Vue development, page jump is an essential part. Vue provides Vue Router to manage application routing, and seamless switching between pages can be achieved through routing. This article will introduce how to use routing to implement page jumps in Vue, with code examples.

First, install the vue-router plug-in in the Vue project. You can install it with the following command:

npm install vue-router

After the installation is complete, introduce vue-router in the main.js file and use it:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Configure routing in the router.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

In this example, we configured two routes: home page (/) and about page (/about). Home and About are two components respectively, which need to be created under the views folder.

Add the routing outlet in App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Now, we have completed the basic routing configuration. Next, we can use routing in the component to implement page jumps.

In the component that needs to jump to the page, you can use the <router-link> tag to generate a jump link. For example, we can add a link to the About page in the Home.vue component:

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

We can also add a link back to the Home page in the About.vue component:

<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Go back to Home</router-link>
  </div>
</template>

Pass Links generated by the <router-link> tag will be automatically converted into <a> tags.

In addition to using the <router-link> tag to generate links, we can also implement page jumps programmatically. Where a jump is required, you can use the $router object to call the methods provided by Vue Router. For example, in the click event handler of a button, you can use the following code to implement the jump:

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

The above code implements the page jump through the $router.push() method, and the parameters are The path to the page to jump to.

After configuring routing and implementing page jumps through the above steps, we can freely jump to pages in the Vue project. In actual development, you can configure more routes according to specific needs, and use other functions provided by Vue Router to implement more complex page jump logic.

The above is the detailed content of How to use routing to implement page jump in Vue?. For more information, please follow other related articles on the PHP Chinese website!