$router and $route

1. this.$routerRouting instance

$router indicates a global routing object. The instance of vue-Router provides methods such as addRoutes and back. It acts as a route manager.

  • this.$router.options.routes(): Gets the current route configuration
  • router.forward()A form that navigates further without refreshing the forward page, similar to router.go(1)
  • this.$router.resolve()Want to open in a new page
this.$router.resolve({name: '', params: {}}) window.open(href.href, '_blank');
Copy the code
  • router.beforeEach()Is the global navigation guard of the route
router.beforeEach((to, from, next) => { next() });
Copy the code
  • router.afterEach()

Compared to beforeEach(), this router method fires after the route is entered and has one less argument, next(), no need to call next to enter

router.afterEach((to, from) => {})

Copy the code
  • router.beforeResolve()

So far there is no difference with beforeEach(), you can do the same thing

2. this.$route

Route indicates the current route object, which contains the route name, path, query, and params attributes. It is a specific route in routes (routes declared for new Router).

  • $route.path

The value is a character string, which is the path of the current route object, for example, /home/news.

  • $route.query

Object containing the key-value pair of the query parameter in the route. Such as “… ? {” name “:” QQ “, “age” : 18}.

  • $route.name

The name of the current path, or null if no named path is used.

  • $route.router

The router (and the component to which it belongs) described in the routing rule.

  • $route.matched

Array that contains configuration parameter objects corresponding to all fragments contained in the currently matched path.

  • $route.params

Object that contains key-value pairs of dynamic fragments and fully matched fragments in the route.

paramsThere are two situations in which no value can occur:

1 router push paramsThere is no value

Route jump code:

this.$router.push({
        path: "/cost/order/detail/",
        params: row,
});
Copy the code

Params is null and row is not passed:

It was later changed to this:

this.$router.push({
        path: "/cost/order/detail/" + row.id,
        params: row,
});
Copy the code

Found that the params value has only one ID. Very strange, so check the official website, found the answer! \

In the original route jump, path is used, params will be ignored, you need to change path to name.

   this.$router.push({
        name: "detail",
        params: row,
   });
Copy the code

Params did pass after the modification. But when the page is refreshed, params becomes empty, which is the second type of params no-value problem.

2 Page RefreshparamsThere is no value

This case refers to the second code example from Part 1: setting params as part of the route.

 'detail/:id'
Copy the code

New page according to this ID, query the row again, the function is complete.

And finally, let’s seequeryandparamsWay difference:
  • queryThe equivalent ofgetRequest, page jump can see the parameters in the address bar
  • paramsThe equivalent ofpostRequest, parameter no longer displayed in address bar
  • They can be used together, especially when there are many parameters. If the parameters are quite large, consider local storage