What are the differences between $router and $route in vue and between router and router and route

Editor to share with you $router and $route in vue and what are the differences between router and router and route. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

1 the difference between this.$router and this.$route

Vue router

This.$router is an instance method of VueRouter. When you navigate to a different url, you can use the this.$router.push method, which adds a record to the history. When you click the browser fallback button or this.$router.back (), the previous url will be rolled back.

This.$route is equivalent to the currently active routing object and contains the data parsed by the current url. You can obtain some data from the object, such as name,path, etc.

2 route hopping is divided into programmatic and declarative

Declarative type

/ / Route entry / / View exit / / Route entry / / View exit

When you want to nest sub-routes on a page and do not jump to the page, I think this is super easy to use, the sub-page will be rendered in the place of router-view

Programming

/ / string router.push ('home') / / object router.push ({path:' home'}) / / named routing router.push ({name: 'user', params: {userId:' 123'}}) / / with query parameters Become / register?plan=privaterouter.push ({path: 'register', query: {plan:' private'}}) / / string router.push ('home') / / object router.push ({path:' home'}) / / named routing router.push ({name: 'user', params: {userId:' 123'}}) / / with query parameters Become / register?plan=privaterouter.push ({path: 'register', query: {plan:' private'}})

But it must be noted that if you provide path, then the configuration of params and query will be ignored

3 the difference between path:'name' and path:'/name'

If you add /, it will be treated as following the directory, otherwise the current path will be nested in the previous path

/ / for example, the current path is homethis.$router.push ({path:'name'}) / / = = > path is / home/namethis.$router.push ({path:'/name'}) / / = > path is / name//, for example, the current path is homethis.$router.push ({path:'name'}) / / = > path is / home/namethis.$router.push ({path:'/name'}) / / = > path is / name

Ps: take a look at the difference between router and router and route in vue

The two objects that are often manipulated in vue-router are route and route and router.

1. $route object

The $route object represents the current routing information and contains the information parsed by the current URL. Contains the current path, parameters, query objects, etc.

* * 1. Pathroute.pathways *

A string that always resolves to an absolute path, such as "/ foo/bar", for the path that should be routed before.

* * 2.roomroute.paramsgiving *

A key/value object containing dynamic clips and fully matched clips

If there are no routing parameters, it is an empty object.

* * 3.roomroute.queryinitiate *

A key/value object that represents the URL query parameters.

For example, for the path / foo?user=1, there is $route.query.user = = 1

If there are no query parameters, it is an empty object.

* * 4.roomroute.hashworthy *

The hash value of the current route (without #), or an empty string if there is no hash value. Anchor point

* * 5.roomroute.fullPathology *

The parsed URL contains the query parameters and the full path of the hash.

* * 6. Roomroute.matchedforth *

Array containing the configuration parameter objects for all fragments contained in the currently matched path.

* * current path name of 7.$route.name * *

* * 8.$route.meta routing meta-information

Route object appears in many places:

This.route and route and route watcher callbacks within components (monitoring change handling)

Return value of router.match (location)

Parameters of the scrollBehavior method

Parameters of the navigation hook:

Router.beforeEach ((to, from, next) = > {/ / to and from are both routing information objects, which can be easily understood later by using the hook function of the route)

2. $router object

The $router object is an instance of a global route and an instance of the router constructor.

Route instance method:

1 、 push

/ / string this.$router.push ('home') / / object this.$router.push ({path:' home'}) / / named routing this.$router.push ({name: 'user', params: {userId: 123}}) / / with query parameters, becomes / register?plan=123 this.$router.push ({path:' register', query: {plan: '123'}})

The push method is actually the same as.

Note: the jump of the push method adds a new record to the history stack, and we can see the previous page when we click the browser's back button.

2 、 go

/ / Page routing jumps forward or backward this.$router.go (- 1) / / backwards

3 、 replace

The / / push method adds a new record to the history stack, while the replace method replaces the current page, not a new record to the history stack

05

/ / generally use replace to do 404 page this.$router.replace ('/')

When configuring routing, path will sometimes add'/ 'and sometimes not, and those starting with' / 'will be regarded as the root path, so the previous path will not be nested all the time.

The above is all the contents of the article "$router and $route in vue and what is the difference between router and router and route". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!