The Vue Router is the official route manager of the Vue Router. Its deep integration with vue.js core makes building single-page applications a breeze. In fact, routing can be understood as pointing, that is, I click a button on the page to jump to the corresponding page, this is routing;

Tag navigation: tag navigation


jumps to the tag by escaping. The to attribute in the router-link tag will be escaped to the href attribute in the A tag. Jump to the route named user and pass the parameter userId

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Copy the code

Declarative navigation

       <p v-for="(item, index) in brr" :key="index">
              <router-link to="page">{{ item.name }}</router-link>
       </p>
Copy the code

Named route:

Sometimes, it is more convenient to identify a route by a name. Therefore, in order to facilitate us to be lazy, the official added a name attribute to the route. After naming this attribute, we access this attribute, which is equal to accessing the route directly.

    {
      path: '/page'.name: 'page'.component: () = > import(/* webpackChunkName: "about" */ '.. /views/Page.vue')},tabClassFun(v) {
       this.$router.replace({ name: "page" });
     },
Copy the code

Common route:

router.push({ path: '/user/:userId'.params: { userId: 123 }})
Copy the code

In fact, there is no difference between the two, but provides two ways to access the route, can be matched by path or alias;

router.push({ name: 'user'.params: { userId: 123 }})
Copy the code

This is the basics of vUE routing, but check out the vue Router website