What is the difference between $router and $route?

---

the difference

simply put

$router is used to operate routing, and $route is used to obtain routing information.

$ router

$router is an instance of VueRouter
. It contains all routes, including routing jump methods, hook functions, etc., and also contains some sub-objects (such as history). The
commonly used methods are

this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({
    
     path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({
    
     path:"/login",query:{
    
    username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({
    
     name:'user' , params: {
    
    id:123} });

$ route

$route is a jumping route object (routing information object), each route will have a $route object, which is a local object.

The $route.path
string is equal to the path of the current routing object and will be resolved to an absolute path, such as "/home/news".

The $route.params
object contains key-value pairs of dynamic fragments and full-matching fragments in the route.

$route.query
contains key-value pairs of query parameters in the route. For example, for /home/news/detail/01?favorite=yes, you get route.query.favorite == 'yes'.

$route.router
The router (and the component it belongs to) that the routing rule belongs to.

The $route.matched
array contains configuration parameter objects corresponding to all fragments contained in the currently matched route.

.$route.name
The name of the current route, if no named route is used, the name is empty.

• Add the following code to the page to display the properties of these routing objects:

<div>
	<p>当前路径：{
    
    {
    
    $route.path}}</p>
	<p>当前参数：{
    
    {
    
    $route.params | json}}</p>
	<p>路由名称：{
    
    {
    
    $route.name}}</p>
	<p>路由查询参数：{
    
    {
    
    $route.query | json}}</p>
	<p>路由匹配项：{
    
    {
    
    $route.matched | json}}</p>
</div>