How to configure and use routing in Vue?

Vue is an open source JavaScript framework that provides a flexible way to create interactive web applications. One of the key features is Vue routing, which allows us to create single-page applications that manage different pages through the router.

This article will introduce in detail how to configure and use routing in Vue, allowing you to better control the page navigation of your application.

1. Basic concepts of Vue routing

Before understanding the configuration and use of Vue routing, we need to understand some basic concepts. Vue routing is developed based on the Vue Router library, among which:

1. Routing: Routing is the page corresponding to different URLs on the specified website. In Vue, you can implement page navigation of the website by creating routing instances.

2. Router: The router is the instance responsible for managing all routes in the application. The Vue Router library provides a VueRouter object for generating router instances.

3. Path and parameters: Path and parameters are the two parameters for specifying the route. The path is the string specified in the URL to match the route exactly. Parameters are variable parts of the route URL and can be accessed within the route component.

2. Configure Vue routing

Configuring Vue routing needs to be done in a Vue instance. First you need to install the Vue Router library, and then add the VueRouter object to the Vue instance.

1. Install Vue Router

To use Vue Router, you need to add the Vue Router library to your project:

npm install vue-router --save

2. Create a routing component

In Vue, a route can be a component. Therefore, before creating a route, you need to create the corresponding routing component. In the following example, we will create two components: Home and About.

// Home.vue
<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

// About.vue
<template>
  <div>
    <h2>About</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

3. Create routing instance

The steps to create a Vue Router instance are as follows:

1) Import the Vue Router library. Add the following code in the main.js file:

import VueRouter from 'vue-router';

2) Define the route. Add the following code in the main.js file:

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

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

3) Create a Vue Router instance. Add the following code in the main.js file:

const router = new VueRouter({
  routes
});

4) Add the Vue Router instance to the Vue instance. Add the following code in the main.js file:

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

Now, you have created the Vue Router instance and added it to the Vue instance. Next, you need to add links in your Vue template that can be used for navigation.

3. Use Vue routing in templates

Now that you have configured Vue routing, you can use it in Vue templates. In Vue templates, you can use the tag to create links for navigation.

For example, in the following example, we will use the tag to navigate between the Home component and the About component:

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

    <router-view></router-view>
  </div>
</template>

In the above code, < The router-link> tag will be rendered as a link and, when clicked, will navigate the user to the corresponding routing component. The tag is used to render components that match the current route.

4. Vue routing parameters and nested routing

Vue routing can not only accept basic paths, but also parameters and nested routing.

1. Routing parameters

In Vue, you can use routing parameters to specify the path to the dynamic part. For example, in the following example, we will use a colon (:) to specify a dynamic ID parameter:

// router.js
{
  path: '/user/:id',
  component: User
}

// User.vue
export default {
  data() {
    return {
      userId: this.$route.params.id
    };
  }
}

In the above code, we specify the route as /user/:id, where :id is dynamic parameters. When a user accesses the URL /user/123, parameter 123 can be obtained using this.$route.params.id in the User component.

2. Nested routing

Vue routing also supports nested routing. For example, in the following example, we will use the children option to specify a nested route:

{
  path: '/user',
  component: User,
  children: [
    {
      path: '',
      component: UserHome
    },
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}

In the above code, we specify the route as /user and specify two child routes: /user/profile and /user/posts. These sub-routes can be rendered using the tag in the User component.

5. Summary

Vue routing is a flexible way to manage application page navigation. We can use the tag in the Vue template to create links for navigation, and use the tag to render components that match the current route.

There are other key concepts in Vue routing, such as route parameters and nested routes. These concepts give you greater control and management of your application's page navigation.

I hope this article can help you learn and understand the configuration and use of Vue routing, and be able to flexibly apply them in actual development.

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