Vue development practice is my best practice, not the best in the industry, only for your reference, this is a series of articles, but the release time and content is not fixed.

Configuration routes are recommended for application route management because of their high flexibility. However, some frameworks also encapsulate routes with support file conventions, which will not be explained here.

The Vue Router is the official route manager of vue.js. Its documentation is detailed.

The routing configuration

Normally, routing requires only the path and Component fields to be configured, such as:

import Welcome from '@/views/Home/Welcome.vue'

export default[{path: '/'.component: Welcome
  }
]
Copy the code

Routing meta information

However, due to business needs, meta is also a commonly used attribute, which is mainly used for different scenarios:

  • The menu control
  • Authorization certificationStay tuned for

So your configuration looks like this:

import Welcome from '@/views/Home/Welcome.vue'

export default[{path: '/'.component: Welcome,
    meta: {
      title: 'Welcome page'.bypass: true // No permissions are required}}, {path: '/posts'.component: () = > import('@/views/Posts/Search.vue'),
    meta: {
      title: 'Article List'.requiresAuth: true.// To determine whether this page needs to be logged in}}]Copy the code

Magic annotation

Sometimes, in order to load the application quickly, the route is lazy loading operation, so that the user opens the first time, only the code related to the home page, the opening speed will be very fast.

So your routing configuration might look like this:

import Welcome from '@/views/Home/Welcome.vue'

export default[{path: '/'.component: Welcome
  },
  {
    path: '/posts'.component: () = > import('@/views/Posts/Search.vue')}, {path: '/posts/:postId'.component: () = > import('@/views/Posts/Content.vue')}]Copy the code

If you look at the request, you’ll see that clicking on /posts will load the JS file once, and clicking on posts/1 will load the JS file again. The reason is that the files that are imported will be split into separate JS files.

Clicking on certain pages instead has a delay problem because the module file is being loaded.

🌰 list and details merged into one file

Usually when we go to the article list, there is a high probability that we will see the details. In this case, we want to only load the JS file once so that the details will be opened much faster.

So how do you solve this problem? The answer is webpack’s magic notes.

Thus, our configuration is changed to:

export default[{path: '/'.component: Welcome
  },
  {
    path: '/posts'.component: () = > import(/* webpackChunkName: "posts" */'@/views/Posts/Search.vue'),} {path: '/posts/:postId'.component: () = > import(/* webpackChunkName: "posts" */'@/views/Posts/Content.vue'),}]Copy the code

After we set webpackChunkName, the list and details are merged into a SINGLE JS file and loaded together.

Note If the setting fails, check for misspellings, missing quotes, or colons

read

  • Navigation guard
  • Routing meta information
  • Route lazy loading
  • Route component parameters are transmitted
  • Navigation fault

series

  • Application entry Modification
  • Menu and Routing
  • Local Proxy scheme
  • Local Mock scheme