Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to add common parameters to url with global routing hooks in vue" with detailed content, clear steps and proper handling of details. I hope that this article "how to use global routing hooks to add common parameters to url in vue" can help you solve your doubts.

Sometimes we may have such a requirement, for example, now that url is m.taoyuewenhua.com/#/, we need to monitor the parameter abc every time the user jumps to the route. If so, the backend requires us to carry this parameter in the url when we jump to any url later. It becomes m.taoyuewenhua.com/#/&abc=xxx.

This parameter is called "common parameter"

So, what should we do? Because there are many components in vue. It is too troublesome to write in every component. So at this time, the global routing hook came on stage. Are

Router.beforeEach Global Navigation Front Guard Route execution before Jump

Router.beforeResolve global navigation resolution guard vue2.5 new navigation is confirmed, and after the guard and asynchronous routing components in all components are parsed, the resolution guard is called

Router.afterEach Global Navigation Rear Guard Route Jump execution

What we use this time is the front guard. At first I used a rear guard. Because of the emergence of bug, it may also be that I am not skilled. Later, it was changed to the front guard.

The code is as follows:

Router.beforeEach ((to, from, next) = > {if (to.query.abc) {next (); return;}; if (from.query.abc) {let toQuery = JSON.parse (JSON.stringify (to.query)); toQuery.abc = from.query.abc; next ({path: to.path, query: toQuery})} else {next ()})

Explain here: the front guard must remember to execute the next method. If it is not executed, the route will not jump. When routing redirects, if we output from and to. They represent the previous route and the current route, respectively. If we want to transfer from a to b; that is, when we jump, we immediately get the b routing address. And determine whether the b route has the parameter abc at this time. If so, just jump over and the next method executes. And return; if not, then if a the url has the parameter abc, then we put this parameter on the url of b; and the next method executes. Just take this parameter with you. Finally, if a does not have this parameter, the next method executes directly. In other words, the route directly jumps over without any interception.

After reading this, the article "how to add common parameters to url with global routing hooks in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.