Vue and Vue-Router: How to use routing information in components?

Vue and Vue-Router: How to use routing information in components?

Introduction:
During the Vue.js development process, it is often necessary to obtain and use routing information in components, such as obtaining current URL parameters, jumping between different pages, etc. Vue.js provides the Vue-Router plug-in to implement front-end routing functions. This article will introduce how to use Vue-Router in components to obtain and utilize routing information.

Introduction to Vue-Router:
Vue-Router is a routing management plug-in officially provided by Vue.js. It can realize the front-end routing function and enable single-page applications to have URL addresses and URLs like traditional multi-page applications. Page switching features. Vue-Router uses components such as router-view and router-link to render page content and handle page jumps.

In Vue-Router, routing information is stored in the $router object. You can obtain the current routing information through the $router object, including the current routing path, parameters, queries, etc.

Steps to use routing information in components:

1. Import Vue and Vue-Router:
   First, you need to ensure that Vue and Vue-Router are installed, and Import the Vue and Vue-Router packages.

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

2. Configure routing:
   In Vue-Router, you need to define a routing table, including the components and paths corresponding to each route. Routing tables can be defined in the form of arrays or objects.

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

const router = new VueRouter({
  routes
});

In the above code, two routes are defined: '/' corresponds to the Home component, and '/about' corresponds to the About component.

3. Use the $router object in the Vue component:
   In the Vue component, you can access the $router object through this.$router to obtain and use routing information.

For example, you can get the current routing path through this.$router.path, get the current routing parameters through this.$router.params,
get the current routing query through this.$router.query parameter.

export default {
  mounted() {
    console.log('当前路由路径：', this.$router.path);
    console.log('当前路由参数：', this.$route.params);
    console.log('当前路由查询参数：', this.$route.query);
  }
}

In the above code, use the mounted hook function to output the current routing path, parameters and query parameters after the component is loaded.

4. Use router-link in the template to jump to the page:
   Vue-Router provides the router-link component, and you can use the link in the template to jump to the page.

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

In the above code, the jump path is specified through the to attribute. Clicking the Home and About links can jump to the corresponding page.

Summary:
With Vue-Router, it is very simple to use routing information in Vue components. First, import Vue and Vue-Router, configure the routing table, then obtain routing information through this.$router object, and use the router-link component in the template to implement page jump. Through these steps, we can use routing information more conveniently in the Vue.js project to implement functions such as data transfer and page switching between different pages.

I hope this article will help you understand how to use Vue-Router in components to obtain and utilize routing information.

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