Home > Web Front-end > Vue.js > body text

What is the difference between $router and $route in vue

尊渡假赌尊渡假赌尊渡假赌
Release: 2024-01-27 14:17:19
Original
733 people have browsed it

router and route in Vue are two routing-related attributes, with different functions and meanings: 1. $router is an instance of Vue Router, which provides methods and attributes for navigation and routing management; 2. $route is the information object of the current active route, which contains information about the current route.

What is the difference between $router and $route in vue

In Vue, router and route are two attributes related to routing, and their functions and meanings are different.

Pass
router is an instance of VueRouter, which provides some methods and properties to navigate and Manage routing. Through router, we can perform operations such as jumping to other routes, dynamic routing parameters, etc.

For example, you can use the $router.push() method to perform route jump:

// 在Vue组件中
methods: {
  goToAboutPage() {
    this.$router.push('/about');
  }
}
Copy after login

route is the information object of the current active route, which contains some relevant information of the current route, such as Paths, parameters, query parameters, etc. Through route, we can obtain current routing information or monitor routing changes.

For example, you can use $route.params to get the parameters of dynamic routing:

// 在Vue组件中
mounted() {
  console.log(this.$route.params.id);
}
Copy after login

To summarize:

  • $router is an instance of Vue Router, which provides Methods and properties for navigation and routing management.
  • $route is the information object of the current active route, which contains information related to the current route.

The above is the detailed content of What is the difference between $router and $route in vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template