Some problems with passing parameters of meta and params in routing (can be passed but not passed, empty, collocation, click to pass multiple parameters to report an error)

When a routing object does not need to display a component, it can be set through meta

No Footer is required for login and registration, it can be solved by routing meta configuration
  The path judgment can be obtained from the route, but it is troublesome
  Through the routing configuration, configure the meta settings in the routing object to do it

{

path:'/login',

component:Login,

// Meta setting object, which can configure any data you want to match

meta:{

isHidden:true

}

},

Question 1:

Can I use the combination of path and params configuration when specifying the params parameter? (object writing)
      Cannot use the combination of path and params configuration,
    only use the combination of name and params configuration
      queryConfiguration can be combined with path or name

Question 2:

How to specify whether the params parameter can be passed or not?
Path: '/search/:keyword?'

Question 3:

If you specify the name and params configuration, but the data in params is a "", you cannot jump, and the path will be a problem
The premise is that the routing params parameters can be passed or not
      Solution 1: Do not specify params
  Solution 2: Specify the params parameter value as undefined

Question 4:

Can routing components pass props data?
    Yes: You can map/convert the query or params parameters into props and pass them to the routing component object
    Implementation: props: (route)=>({keyword1:route.params.keyword, keyword2: route.query.keyword })

Question 5:

vue_router version 3.1.0 and above introduces the syntax of promise:
If we pass parameters without modifying the parameters and click multiple times at the same time, such an error will be thrown
Uncaught (in promise) NavigationDuplicated, the reason isThe internal promise is failed, and we didn't deal with it. Solution 1: Downgrade version, not good. Solution 2: Process the failed promise and add .catch(() => {}) after the push callNot good, I have to add it every time, trouble
  Solution 3: Modify the source code, once and for all

The push method has three parameters:

1. The matching route (can be a route path string or a route object)

2. Successful callback

3. Failed callback

The push method wants to not report an error

vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated:

Avoided redundant navigation to current location: "/search/aa?keyword1=AA".

When passing parameters, at least one of the callbacks for success and failure must be passed

According to the source code analysis, if at least one processing function is passed, then the intervention of promise will not be triggered. If none are passed, then

Promise intervention will be introduced, and if we do not handle the failed callback function, an exception will be thrown and an error will be reported

if (!onComplete && !onAbort && typeof Promise !== 'undefined') {

return new Promise(function (resolve, reject) {

this$1.history.push(location, resolve, reject);

   });

} else {

this.history.push(location, onComplete, onAbort);

  } }

Configure in the router

// The method called by this.$router.push is the following method// 1. Save the previous push method to prevent the loss of later modificationsconst originPush = VueRouter.prototype.pushconst originReplace = VueRouter.prototype.replace// 2. Modify the push method on the prototype, so that when I call it later, my modified push method is calledVueRouter.prototype.push = function(location, resolved, rejected) {if(resolved === undefined && rejected === undefined){return originPush.call(this,location).catch(() => {})}else{return originPush.call(this,location,resolved,rejected)}}VueRouter.prototype.replace = function(location, resolved, rejected) {if(resolved === undefined && rejected === undefined){return originReplace.call(this,location).catch(() => {})}else{return originReplace.call(this,location,resolved,rejected)}}