The difference between router and route in VUE

Create router and route objects through corresponding methods in vue3

import {useRouter,useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

console.log('router',router);
console.log('route',route);

router

The global routing object has various properties and methods, including all routes. The common methods are

• push: Jump to the page and add a route to the history stack
• replace: replace route, no history (used by dynamic route)
• go: How many steps forward or backward in the history record

route

Partial route object, which represents the state information of the currently active route, including the information obtained by parsing the current URL, and the route records matched by the URL. Routing objects are immutable, and a new object is created after each successful navigation. Commonly used are

1. path: The path corresponding to the current route, such as "/about".
2. name: the name of the current route, if any
3. meta: Routing meta information
4. query: A key/value object representing URL query parameters. For example, for paths /foo?user=1, there is $route.query.user == 1, or an empty object if there are no query parameters. Also includes parameters passed through query.