This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

In this article we will look at creating route instance methods :createRouter and their configuration items, and we need to know how to use them.

createRouter

Creating a Routing Instance

Create a routing instance that can be used by a Vue application as follows:

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router
Copy the code

The route variable is used to store routes. However, it is worth noting that this is the use of Vue Router 4.x. This is not the same as the use of earlier versions of the Vue Router.

Configuration items

There are more than two configuration parameters in the createRouter function, so let’s take a look.

history

Officials say it is used to implement routing history. Most Web applications should use createWebHistory, but it requires that the server be configured correctly *. You can also use the Hash-based history of createWebHashHistory, which doesn’t require any configuration on the server, but the search engines don’t handle it at all and perform poorly on SEO.

Configure the route to hash mode or HTML5 mode, which is the same as the lower version, but the method of use has been changed, using the following:

HTML 5 mode

history: createWebHistory()
Copy the code

This is the most common history in single-page applications, which must be served over the HTTP protocol. The createWebHistory function takes one argument and can add a path as follows:

history: createWebHistory('/folder/')
Copy the code

So our corresponding output url is: https://xxx.com/folder/.

Hash pattern

history: createWebHashHistory()
Copy the code

Similar to HTML5 mode, this function takes a parameter that does the same thing, but with a different output address: https://xxx.com/folder/#.

We can see from the result that there is an extra #, so we should avoid using paths containing # when passing parameters, such as:

createWebHashHistory('/folder/#/app/') // This parameter is not recommended
Copy the code

Note: If SEO is important to you, you should use createWebHistory.

LinkActiveClass and linkExactActiveClass

LinkActiveClass is the default class for the activated RouterLink, and linkExactActiveClass is the default class for the precisely activated RouterLink. The configuration on router-link is the same as in the createRouter function.

ParseQuery and stringifyQuery

The custom implementation parseQuery uses to parse queries must decode query keys and values.

StringifyQuery A custom implementation of stringing a query object. It should not be preceded by? , the query key and value should be properly encoded.

If we parse the query using qs packages, we can provide both parseQuery and stringifyQuery as follows:

parseQuery: qs.parse,
stringifyQuery: qs.stringify,
Copy the code

routes

It should be familiar to most people, and it is the initial list of routes to add to the route. We’ll talk more about that later.

scrollBehavior

A function that controls scrolling while navigating between pages. You can return a Promise to delay scrolling. For more details, see scrolling behavior.

function scrollBehavior(to, from, savedPosition) {
  // 'to' and 'from' are both routing addresses
  // 'savedPosition' can be empty if not.
}
Copy the code

We can control the scrolling behavior every time a route jumps.

conclusion

  1. In actual development, we usually master history and routes.

  2. If we don’t want the server to have that much configuration, we’ll use createWebHashHistory; If SEO is important to you, we should use createWebHistory, but this also requires us to configure the server.

For more articles, the portal has opened: Look back at the Vue3 catalogue!