An article introducing the steps to use Vue Router

With the continuous development of front-end technology, more and more applications are now beginning to adopt the single page application (Single Page Application, SPA) development method. As one of the important tools for front-end development, Vue.js has become one of the preferred frameworks for more and more developers. And when we use Vue.js to build a single-page application, Vue Router comes into being.

Vue Router is the official routing manager of Vue.js. It allows us to define application routing rules through simple configuration and map these rules to components to achieve page jump effects in single-page applications. In this article, we will introduce the steps to use Vue Router.

Step One: Installation

To use Vue Router, you first need to install it in the project. You can install it through npm or yarn:

npm install vue-router --save

or

yarn add vue-router

Step 2: Create a routing instance

The core part of Vue Router is to create a routing instance . We usually create this instance in the routing configuration file router.js (or other name). First, we need to introduce Vue and Vue Router:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Then, we need to define routing rules:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

where routes is an array containing routing rules. Each routing rule is an object containing two attributes: path and component. Among them, path represents the path of the URL, and component is the component corresponding to the path.

Finally, we need to create a Vue Router instance and pass the routes rules we defined into it:

const router = new VueRouter({
  mode: 'history',
  routes
})

When creating the instance, we can configure some properties, such as mode and routes, etc. , these will be used to specify routing-related parameters.

Step 3: Mount the routing instance to the root instance

We will use the routing instance (Vue Router object) in the root instance, so we need to mount the instance to the root instance middle. For example:

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

Here, we pass the routing instance (i.e. router) to our root Vue instance and render the root component (i.e. App) onto the #app node of the application.

Step 4: Use routing-related components

When we have created a Vue Router instance and mounted it to the root Vue instance, we can then add it between Vue components Carry out route navigation.

In Vue Router, there are two important components: router-view and router-link. Router-view is used to display the specific content of routing components, while router-link is a link to navigate between different routes.

For example, in our application root component, we can use router-view to display the components corresponding to different routes:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Here, we have created some routes through the router-link tag Link. When the routing link is clicked, Vue Router automatically updates the URL and renders the routing component into router-view.

Step 5: Use routing hook functions

Vue Router also provides some hook functions (routing guards) to handle the logic in the navigation process. These routing hooks can be used globally or per route.

For example, in the global routing hook function beforeEach, we can implement the user's login verification logic:

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.isAuthenticated) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

In the above code, we use the beforeEach routing hook to check whether the user is authenticated. If the user has been authenticated, continue navigation; otherwise, redirect the user to the login page.

In addition to the beforeEach routing hook, Vue Router also provides some other hook functions used in the routing navigation process. For example, beforeRouteEnter is used to obtain the component instance object before entering a new route. beforeRouteUpdate is used to obtain the component instance object when the current component is reused. and beforeRouteLeave is used to obtain the instance object when the navigation leaves the current component.

The above are the steps for using Vue Router. Vue Router provides a very rich set of configuration options and routing hook functions, which can help us simplify the development process and improve application performance and user experience.

The above is the detailed content of An article introducing the steps to use Vue Router. For more information, please follow other related articles on the PHP Chinese website!