Detailed explanation of the installation and use of routing in vue

Vue is a popular front-end development framework that provides many tools and functions that facilitate development. Among them, Vue routing can help us create single-page applications and help us implement routing functions. This article will introduce the use of Vue routing.

Vue routing installation

Before starting to use Vue routing, we need to install Vue Router first. It can be installed through npm:

npm install vue-router

Using Vue router

In the entry file main.js of the Vue project, we need to make some configurations to use Vue routing.

First, we need to import Vue and Vue Router:

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

Vue.use(VueRouter)

Then, we need to define routes. It can be done in a separate js file. For example, here we define the route in routes.js:

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

In routes.js, we first import the components we need to use, and then define a route containing two An array of routing objects. Each route object contains a path and component fields.

Next, in main.js, we need to create a VueRouter instance and pass it into the Vue instance:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

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

Next, we use routing. For example, we can use routes in <router-link> to link to other routes:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>

Here, we use the <router-link> tag A routing link is created, and when the user clicks the link, he or she can jump to the specified route. The to attribute defines the target route of the link.

In addition, we can also use the programmatic navigation function provided by Vue Router to realize page jumps:

this.$router.push('/bar')

When jumping, we can also pass some parameters:

this.$router.push({ name: 'User', params: { userId: 1 }})

Here, we use the $router.push method and pass an object as a parameter, where the name field specifies the name of the target route, and the params field passes some parameters.

Summary

Vue Router is one of the very important components in the Vue framework. It provides powerful routing functions and can help us create more colorful single-page applications. In this article, we explain the installation and use of Vue routing, and provide you with a deeper understanding of how to use Vue Router through sample code. I hope it can help everyone use Vue router better.

The above is the detailed content of Detailed explanation of the installation and use of routing in vue. For more information, please follow other related articles on the PHP Chinese website!