Detailed explanation of the difference between $router and $route in Vue

We usually use routing in vue projects, and vue-router is the official routing manager of vue.js.

this.$route: The information object of the currently activated route. Each object is local and can get the path, name, params, query and other attributes of the current route.

this.$router: global router instance. By injecting the router instance into the vue root instance and then injecting it into each child component, the entire application has routing functionality. It contains many properties and objects (such as the history object), and any page can call its push(), replace(), go() and other methods.

Anyone who has used Vue knows that routing can be divided into programmatic and declarative types.

Declarative:

Simply put, use the router-link component to navigate, and specify the link by passing in the to attribute (router-link will be rendered as an a tag by default).

When you need to nest sub-routes in a page and the page does not jump, this method is not very useful, hahahaha... Just render the sub-page in router-view.

Programmatic:

In this way, you need to import VueRouter and call it.

Then let me talk about the steps of using vue-router (the following is a programmatic approach):

1. Define two single .vue components for route jumps: home.vue and user.vue;

2. Import vue, vue-router, and define routes. Each route contains a component attribute, which maps a component --- router.js

import Vue from 'vue'
import Router from 'vue-router'

import Home from './home.vue'
import User from './user.vue'

Vue.use(Router);

3. Create a router instance and pass the routes configuration --- router.js

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

const router = new Router({
    routes
})

4. Inject the route into the root instance of vue so that you can access the route in any other component --- main.js

import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

The general steps are as follows

Okay, our pig feet are about to show up﹏~*There are two ways to access the route in the user and home components above: this.$router and this.$route. These two methods are used in roughly the same way, but there are still differences. (Shown below)

You can see that this.$route displays the information object of the currently activated route. This object is local and can get the path, name, params, query and other attributes of the current route, which will not be explained in detail here.

$route.matched is an array containing all nested records of the current route, that is, the object array in the routes configuration, including its own information and children data. For example, my routes configuration is:

const router = new VueRouter({
  routes: [
    // The following object is the routing record {
      path: '/taskList',
      component: TaskList,
      name: 'Task List',
      children: [
        {
          path: '/taskDetail',
          component: TaskDetail,
          name: 'Task details'
        }
      ]
    }
  ]
})

The matched expansion result in this.$route is:

For example, when using navigation guards for login functionality, if you need to check meta to determine whether login is required, you can check the meta field in the route record by traversing $route.matched.

In addition, inside the vue instance, you can also access the routing instance through this.$router. It is a global routing instance. The router instance is injected into the vue root instance and then injected into each child component, so that the entire application has routing functionality. Printing this.$router in any child component gives the following:

It contains many properties and objects (such as the history object), and any page can call its push(), replace(), go() and other methods.

The push() method adds a record to the history. When you click the browser's back button, you can return to the previous page. When we click <router-link to=' ... ' />, it is equivalent to calling this.$router.push().

• The parameter of this.$router.push() method can be a string path or an address object, for example:
• this.$router.push('home') this.$router.push({path: 'home'})

You can also carry parameters, but please note: if path is provided, params will be ignored, for example:

this.$router.push({path: 'home', params: { page: 2}}) The params here will be ignored

The same rule applies to the to attribute of router-link

Several methods are available:

• this.$router.push({path: `/home/${page=2}``})
• this.$router.push({name: 'home', params: { page: 2}})
• this.$router.push({path: 'home', query: { page: 2}})

These methods get parameters: this.$route.params.page / this.$route.query.page

The above is a detailed explanation of the difference between $router and $route in Vue. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!