How to use routing to achieve page switching effect in Vue project?

How to use routing to achieve page switching effect in Vue project?

With the continuous development of front-end development, the development method of single-page application (SPA) is becoming more and more popular among developers. In SPA, it is a very common requirement to achieve switching effects between pages through routing. In Vue.js, we can use Vue Router to achieve this function.

Vue Router is the routing tool officially provided by Vue.js. It can help us navigate and jump between pages in the Vue project. Below we will introduce step by step how to use Vue Router in the Vue project to achieve the page switching effect.

First, we need to install Vue Router in the Vue project. Vue Router can be installed through npm, using the following command:

npm install vue-router

After the installation is completed, we need to introduce Vue Router in the project's entry file (usually main.js) and use it. We can use the following code to introduce Vue Router:

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

Vue.use(VueRouter)

Next, write the following code to create the routing object:

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

In this example, we define two routes: '/ 'The corresponding component is Home, and the corresponding component of '/about' is About. When the user accesses the corresponding route, Vue Router will automatically render the corresponding component.

Then, we need to add a routing object to the Vue instance. We can achieve this with the following code:

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

Here, we add the routing object to the router option in the Vue instance.

In the Vue component, we can switch between pages through the router-link tag. We can add the router-link tag to the component's template using the following code:

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

In this example, we have added two router-link tags. When the user clicks on these labels, Vue Router will automatically navigate the user to the corresponding route.

Finally, we also need to add the router-view tag to the Vue component. This can be achieved using the following code:

<router-view></router-view>

router-view tag is used to render the component corresponding to the current route.

Through the above steps, we can use Vue Router in the Vue project to achieve the page switching effect. When the user clicks the router-link label, the route will automatically navigate to the corresponding component, and the page will switch accordingly.

The complete sample code is as follows:

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

import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

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

Through the above code, we can use Vue Router in the Vue project to achieve the page switching effect, making the user interaction experience smoother. Hope this article can be helpful to you!

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