In-depth understanding of Vue-cli4 routing configuration

Preface - Vue Routing

Vue-router is the official routing plugin for Vue, deeply integrated with Vue.js.
In a single-page application using vue-router, the change of URL will cause the switching of components, thus achieving the effect of page switching. Therefore, how to make the URL change as we wish and where the page goes after the URL changes are the two major issues in configuring vue-router.

[SPA webpage] Front-end rendering enables the implementation of single-page rich application SPA pages. The entire webpage has only one HTML page, and the static resource server has only one set of HTML & CSS, or even only one set of JS.

[Rich Application] is realized by sending a new request URL to the server. After obtaining resources from the server, the front-end router will be responsible for allocating resources to the corresponding components of the page;

The implementation of [single page] requires the URL to be changed on the front end. After the front-end routing appears, the front-end routing will find the part that needs to be changed from the mapping relationship according to the router's monitoring, extract and allocate new resources, and only re-render the part that needs to be changed;

1. The most basic routing configuration

First you have to install vue-router, I won’t tell you how to install it…
After we successfully install vue-router, a "router" folder will appear in the src of the project file. There will be an index.js in this folder, and the configuration of the router is mainly completed here.

Open it and configure it in the routes array. The routes of a page are grouped into an object in this array, which includes properties such as path and component, corresponding to how the URL will react to changes;

1. Configure router/index.js

//This is in router/index.js, all;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
   //Configure routing here;
]
//Use createRouter instead of new VueRouter in router4;
const router = createRouter({ 
  history: createWebHistory(process.env.BASE_URL),
  routes
  //Introduce the routing configuration array routes of all pages here;
})

export default router   
//Export the router object containing all routing configurations,
//Injected in main.js for global use;

Component attribute: The value is a page. This page control needs to be introduced in advance.

path attribute: specifies what appears in the URL to jump to the page corresponding to the component attribute.

//This is in router/index.js, the end is omitted;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
//Introduce 3 page controls;
const routes = [
    {
        path: '/', /* specifies the page corresponding to the initial URL*/
        name: 'Home',
        component: Home /* Specifies the default Home page*/
   },
   {
        path: '/about',/* specifies the URL to jump to when the new segment is /about*/
        name: 'About',
        component: About /* Jump to About */
   },
   {
        path: '/news', /* Specifies that the URL will redirect when the new segment is /news*/
        name: "News",
        component: News /* Jump to News */
   },
]

2. Configure App.vue

We have already specified how to redirect when the URL changes to different characters. Now we need to think about how to make the URL change in our way.
Because only App.vue will be rendered, and everyone will see and operate only App.vue at the beginning, so our rules for changing the URL can only be made here.

Meet two new tags, which have been registered globally.

  <router-link to="Characters to be added to the URL">XXX</router-link>
  //<router-link> will be rendered as <a>;
  <router-view />
  //These two need to be used in combination;

All page jumps in App.vue are driven by <router-link> by changing the URL.

<router-view> is a placeholder tag that specifies where the router-link tag should be displayed.
, anyway, if you delete it, router-link will not be displayed (that is not important, let's talk about routing first...).

<!-- This is in App.vue -->
<template>
  <div id="nav">
  <!-- The to attribute specifies how to change the URL; -->
  <!-- The Tag attribute specifies what HTML element the router-link tag needs to be rendered into; -->
    <router-link to="/" Tag="a">Home page</router-link> |
    <router-link to="/about" Tag="a">About page</router-link> |
    <router-link to="/news" Tag="a">News page</router-link> |
    <router-link to="/login" Tag="a">Login</router-link>
  </div>
  <router-view />
</template>

Then you can run your project npm run serve to see;

You can see that according to the Tag attribute, there are 4 more a tags. Let's click on News to see.

The URL changes according to the value of the to attribute of router-link, and the page jumps correctly.
At this point the basic routing configuration is complete.

2. Routing lazy loading technology

Separating the components corresponding to different routes, and loading the corresponding components only when a certain route is triggered, will be more efficient. Except for third-party, underlying support, and public apps, other Vue page components are on the server and can be requested at any time to ensure minimal impact on the page.

In fact, it is just to change the way of introducing each component in router/index.js...
This is done using the arrow function method.

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
    //About is introduced here directly and assigned to component;
  },
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue")
        //About is introduced here directly and assigned to component;
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
        //About is introduced here directly and assigned to component;
  },
]

3. Nested Routes

We can't have no links on our subpages, right? When users enter a subpage through App.vue, there should be subordinate links to guide them to other pages, which requires routing nesting technology.

To put it simply, it is to specify the route of the child page in the route of the parent page, for example, specify the route of NewsChild-1.vue in the route of News.vue.

//This is the reduced router/index.js;
const routes = [
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue"),
    children: [
      {
        path: 'NewsChild-1', 
        //Subroutes do not need to be preceded by "/" and the path of the previous layer.
        //But in fact, the analysis will be added;
        //When the specified URL appears /News/NewsChild-1,
        //Jump to the page corresponding to component;
        component: () => import("../views/NewsChild-1"),
      }
    ]
  },
]

This specifies the actions that should be performed when the URL of the News page changes.
Of course, we also need to specify how to change the URL on the News page and enter News.vue to do it.

<!-- This is News.vue; -->
<template>
  <h1>News</h1>
  //Specify that when triggered, the URL will be incremented by /News/NewsChild-1;
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <router-view></router-view>
</template>

Then take a look at the rendered page:

Click on the link NewsChild-1:

The URL becomes /News/NewsChild-1, based on the value of the to attribute of router-link.
You can nest more page components in the children array and do the same.

4. Dynamic Routing

Oftentimes, where the page needs to jump to cannot be determined by our program. This requires the program to decide for itself according to the needs, so that the route can be changed dynamically.

1. Dynamic routing configuration

To put it simply, we don't need to hardcode [URL to be added to] and [URL to be redirected by path], but use v-bind to connect the parts of the URL that need to change frequently with the data in export default, so that the URL changes with the data.

//This is in router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
  //We should not hardcode the value of path here;
    path: '/user/:userId',
    name: 'User',
    component: () => import('../views/User.vue'),
  }
];

<!-- This is in App.vue-->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <!-- Use v-bind to call the userId data here; -->
    <!-- Concatenate /user/ as a string to userId -->
    <router-link v-bind:to="'/user/' + userId">user</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    //Set the userId data to baixia here;
      userId: "baixia",
    };
  },
};
</script>

Let’s take a look at the effect:

Next click on Users:

The URL successfully concatenates the UserId in data, which is baixia.

2. Dynamic routing parameters

Dynamic routing is also one of the ways Vue transfers data, using $route to communicate between Vue page components (i.e. vue files).
Let's first get to know two variables:
$router : The routing object created by createRouter at the end of index.js
$route : The currently active route object, which has a params attribute, full name parameters, which can be used to get the value passed in our URL using v-bind.

For example, User.vue needs to obtain the userId data in App.vue's data:

<!-- In App.vue (sender) -->
<template>
  <div id="app">
    <router-link v-bind:to="'/user/' + userId">user</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      userId: "baixia",
    };
  },
};
</script>

//In user.vue (receiver)
export default {
    name:"user",
    computed: {
        userId() {
            return this.$router.params.userId
//The value of this.$router.param.userId,
//That is, the userId passed in by the router-link of App.vue is returned,
//Used as the value of the calculated attribute userID()}
    }
}

The params used in User.vue to obtain user information depends on the path in index.js. If path:'/user/:abc', then the <script> in User.vue should be:

export default {
    name:"user",
        computed: {
            userId() {
            //Here should also get the abc attribute;
                return this.$router.params.abc
           }
        }
}

Summarize

I received a notice yesterday saying that I won the first prize in the HTML5 design competition...
It's quite outrageous. I think it's pretty standard. I have to catch up with the progress of Vue in the next few days.

This is the end of this article about in-depth understanding of Vue-cli4 routing configuration. For more relevant Vue-cli4 routing configuration content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!